Auto-Extracted Component Library

<div class="offset-hero-content">
 <div class="offset-text">
  <span class="badge">
   Minnesota's Premier Venue
  </span>
  <h2>
   Where Rustic Charm Meets Modern Elegance
  </h2>
  <p>
   Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.
  </p>
  <div class="btn-group">
   <a class="btn-outline" href="#">
    View Gallery
   </a>
   <a class="btn-outline" href="#">
    Check Availability
   </a>
  </div>
 </div>
 <div class="offset-images">
  <div class="offset-main-img">
   <img alt="Wedding ceremony" src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800"/>
  </div>
  <div class="offset-accent-img">
   <img alt="Wedding details" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
  </div>
  <div class="floating-card">
   <h4>
    2025 Dates
   </h4>
   <p>
    Limited availability for peak season
   </p>
  </div>
 </div>
</div>

.offset-main-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 85%;
            height: 85%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.offset-hero-content,
            .block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.offset-accent-img {
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 45%;
            height: 45%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border: 8px solid var(--soft-white);
        }
.offset-text p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 40px;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.offset-hero-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
        }
.offset-accent-img {
                display: none;
            }
.offset-accent-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.offset-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.offset-images {
                height: 400px;
                margin-top: 40px;
            }
.offset-text {
            z-index: 2;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.offset-text .badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.offset-images {
            position: relative;
            height: 600px;
        }
.offset-text h2 {
            font-size: 54px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }

Heroes - Venue Showcase Section Shape Top Shape So

HEROES html> comp-13

A heroes component containing images, buttons. Contains 28 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

<section class="venue-showcase section-shape-top shape--soft-curve">
 <div class="container venue-content">
  <div class="venue-header">
   <h2>
    Explore Our Spaces
   </h2>
   <p>
    Every corner tells a story, every space creates memories
   </p>
  </div>
  <div class="venue-tabs">
   <button class="venue-tab active">
    The Barn
   </button>
   <button class="venue-tab">
    Bridal Suite
   </button>
   <button class="venue-tab">
    Groom's Quarters
   </button>
   <button class="venue-tab">
    Garden Pavilion
   </button>
  </div>
  <div class="venue-display">
   <div class="venue-main-image">
    <img alt="Barn interior" src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?w=800"/>
   </div>
   <div class="venue-details">
    <h3>
     The Historic Barn
    </h3>
    <p>
     Our crown jewel, this beautifully restored barn features soaring ceilings, original timber beams, and modern amenities seamlessly integrated into its historic charm.
    </p>
    <div class="venue-features">
     <div class="venue-feature">
      <h5>
       Capacity
      </h5>
      <p>
       Up to 300 guests
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Features
      </h5>
      <p>
       Built-in bar & dance floor
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Lighting
      </h5>
      <p>
       Edison bulbs & chandeliers
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Climate
      </h5>
      <p>
       Heated & air conditioned
      </p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <!-- Split Divider Bottom -->
</section>

.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.venue-display {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 60px;
            align-items: center;
        }
.venue-showcase.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.container {
                padding: 0 20px;
            }
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.venue-main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.shape--soft-curve { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q600,0 1200,60 L1200,120 L0,120 Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.venue-content {
            position: relative;
            z-index: 1;
        }
.section-shape-top { 
            position: relative; 
        }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
.venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.venue-details p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }
.venue-details {
            color: white;
        }
.venue-showcase {
            padding: 120px 0;
            overflow: visible;
            background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(212, 165, 116, 0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>'), linear-gradient(135deg, var(--deep-brown) 0%, var(--dark-bg) 100%);
            background-repeat: repeat, no-repeat;
            background-size: 60px 60px, 100% 100%;
            background-position: top left, center;
            position: relative;
            overflow: hidden;
        }
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }
.venue-main-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
        }
.venue-details h3 {
            font-size: 36px;
            margin-bottom: 25px;
            color: var(--accent-gold);
        }

Galleries - Packages Grid

GALLERIES html> comp-14

A galleries component containing buttons. Contains 41 child elements.

Intimate

$3,500 / up to 75 guests

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens

Bridal suite access

<div class="packages-grid">
 <div class="package-card">
  <div class="package-header">
   <h3 class="package-name">
    Intimate
   </h3>
   <div class="package-price">
    $3,500
    <span>
     / up to 75 guests
    </span>
   </div>
  </div>
  <div class="package-body">
   <ul class="package-features">
    <li>
     6-hour venue rental
    </li>
    <li>
     Ceremony & reception spaces
    </li>
    <li>
     Tables, chairs & linens
    </li>
    <li>
     Bridal suite access
    </li>
    <li>
     Setup & breakdown assistance
    </li>
   </ul>
   <button class="package-btn">
    Learn More
   </button>
  </div>
 </div>
 <div class="package-card featured">
  <div class="package-header">
   <h3 class="package-name">
    Classic
   </h3>
   <div class="package-price">
    $5,500
    <span>
     / up to 150 guests
    </span>
   </div>
  </div>
  <div class="package-body">
   <ul class="package-features">
    <li>
     10-hour venue rental
    </li>
    <li>
     Full property access
    </li>
    <li>
     Premium décor package
    </li>
    <li>
     Both suites included
    </li>
    <li>
     Day-before setup time
    </li>
    <li>
     Complimentary rehearsal
    </li>
   </ul>
   <button class="package-btn">
    Most Popular Choice
   </button>
  </div>
 </div>
 <div class="package-card">
  <div class="package-header">
   <h3 class="package-name">
    Grand
   </h3>
   <div class="package-price">
    $8,500
    <span>
     / up to 300 guests
    </span>
   </div>
  </div>
  <div class="package-body">
   <ul class="package-features">
    <li>
     Full weekend rental
    </li>
    <li>
     All venue spaces included
    </li>
    <li>
     Luxury décor collection
    </li>
    <li>
     Golf cart transportation
    </li>
    <li>
     Fire pit & s'mores bar
    </li>
    <li>
     Morning-after brunch setup
    </li>
   </ul>
   <button class="package-btn">
    Ultimate Experience
   </button>
  </div>
 </div>
</div>

.packages-grid,
            .services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-body {
            padding: 40px 30px;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.packages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Galleries - Blog Grid

GALLERIES html> comp-15

A galleries component containing images, links. Contains 33 child elements.

Real Weddings

A Magical Fall Wedding: Sarah & Tom's Story

<div class="blog-grid">
 <article class="blog-card">
  <div class="blog-image">
   <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
   <span class="blog-category">
    Real Weddings
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 15, 2024
    </span>
    <span>
     5 min read
    </span>
   </div>
   <h3 class="blog-title">
    A Magical Fall Wedding: Sarah & Tom's Story
   </h3>
   <p class="blog-excerpt">
    When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
   </p>
   <a class="read-more" href="#">
    Read Story
   </a>
  </div>
 </article>
 <article class="blog-card">
  <div class="blog-image">
   <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
   <span class="blog-category">
    Planning Tips
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 10, 2024
    </span>
    <span>
     3 min read
    </span>
   </div>
   <h3 class="blog-title">
    10 Ways to Personalize Your Barn Wedding
   </h3>
   <p class="blog-excerpt">
    From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
   </p>
   <a class="read-more" href="#">
    Read More
   </a>
  </div>
 </article>
 <article class="blog-card">
  <div class="blog-image">
   <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
   <span class="blog-category">
    Seasonal Guide
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 5, 2024
    </span>
    <span>
     4 min read
    </span>
   </div>
   <h3 class="blog-title">
    Why Minnesota Summers Make Perfect Weddings
   </h3>
   <p class="blog-excerpt">
    Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
   </p>
   <a class="read-more" href="#">
    Read Guide
   </a>
  </div>
 </article>
</div>

.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Galleries - Instagram Grid

GALLERIES html> comp-16

A galleries component containing images. Contains 36 child elements.

1,247 Likes

<div class="instagram-grid">
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     1,247
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     892
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     2,103
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     1,567
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     934
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
 <div class="instagram-post">
  <img alt="Instagram post" src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=400"/>
  <div class="instagram-overlay">
   <div class="instagram-stats">
    <span class="count">
     3,421
    </span>
    <span>
     Likes
    </span>
   </div>
  </div>
 </div>
</div>

.instagram-post {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }
.instagram-grid {
                grid-template-columns: 1fr;
            }
.instagram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 36, 22, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
.instagram-post img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.instagram-post:hover .instagram-overlay {
            opacity: 1;
        }
.instagram-stats span {
            display: block;
            margin: 10px;
            font-size: 16px;
        }
.instagram-overlay {
            opacity: 1;
        }
.instagram-stats {
            text-align: center;
            color: white;
        }
.count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.instagram-post:hover img {
            transform: scale(1.1);
        }
.instagram-stats .count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Galleries - Instagram Section Section Shape Top Sh

GALLERIES html> comp-17

A galleries component containing images, links. Contains 41 child elements.

Follow Our Journey

@rumriverbarn

<section class="instagram-section section-shape-top shape--angle">
 <!-- Simple Angle Top -->
 <div class="container">
  <div class="instagram-header">
   <h2>
    Follow Our Journey
   </h2>
   <a class="instagram-handle" href="#">
    @rumriverbarn
   </a>
  </div>
  <div class="instagram-grid">
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,247
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       892
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       2,103
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,567
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       934
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       3,421
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>

.instagram-handle {
            color: var(--accent-gold);
            font-size: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
.instagram-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
.instagram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 36, 22, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.instagram-post:hover .instagram-overlay {
            opacity: 1;
        }
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.instagram-stats span {
            display: block;
            margin: 10px;
            font-size: 16px;
        }
.instagram-stats {
            text-align: center;
            color: white;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.instagram-section.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.container {
                padding: 0 20px;
            }
.instagram-overlay {
            opacity: 1;
        }
.instagram-header {
            text-align: center;
            margin-bottom: 60px;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.instagram-post:hover img {
            transform: scale(1.1);
        }
.count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.instagram-grid {
                grid-template-columns: 1fr;
            }
.instagram-post img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.section-shape-top { 
            position: relative; 
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.instagram-post {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }
.instagram-section {
            padding: 120px 0;
            background: var(--warm-cream);
            position: relative;
        }
.instagram-handle:hover {
            color: var(--primary-brown);
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.instagram-stats .count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Cards - Floating Card

CARDS html> comp-20

A cards component. Contains 2 child elements.

2025 Dates

Limited availability for peak season

<div class="floating-card">
 <h4>
  2025 Dates
 </h4>
 <p>
  Limited availability for peak season
 </p>
</div>

.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }

Services Cards

CARDS html> comp-21

A cards component containing images. Contains 18 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.

<div class="services-cards">
 <div class="service-card">
  <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $5,000
   </span>
   <h3 class="service-title">
    Weddings
   </h3>
   <p class="service-description">
    Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
   </p>
  </div>
 </div>
 <div class="service-card">
  <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $2,000
   </span>
   <h3 class="service-title">
    Corporate Events
   </h3>
   <p class="service-description">
    Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
   </p>
  </div>
 </div>
 <div class="service-card">
  <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $1,500
   </span>
   <h3 class="service-title">
    Celebrations
   </h3>
   <p class="service-description">
    Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
   </p>
  </div>
 </div>
</div>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.services-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Service Card

CARDS html> comp-22

A cards component containing images. Contains 5 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.

<div class="service-card">
 <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $5,000
  </span>
  <h3 class="service-title">
   Weddings
  </h3>
  <p class="service-description">
   Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
  </p>
 </div>
</div>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Service Card

CARDS html> comp-23

A cards component containing images. Contains 5 child elements.

From $2,000

Corporate Events

Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.

<div class="service-card">
 <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $2,000
  </span>
  <h3 class="service-title">
   Corporate Events
  </h3>
  <p class="service-description">
   Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
  </p>
 </div>
</div>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Service Card

CARDS html> comp-24

A cards component containing images. Contains 5 child elements.

From $1,500

Celebrations

Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.

<div class="service-card">
 <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $1,500
  </span>
  <h3 class="service-title">
   Celebrations
  </h3>
  <p class="service-description">
   Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
  </p>
 </div>
</div>

Setup & breakdown assistance

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }

Cards - Package Card

CARDS html> comp-25

A cards component containing buttons. Contains 12 child elements.

Intimate

$3,500 / up to 75 guests

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens
Bridal suite access

<div class="package-card">
 <div class="package-header">
  <h3 class="package-name">
   Intimate
  </h3>
  <div class="package-price">
   $3,500
   <span>
    / up to 75 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    6-hour venue rental
   </li>
   <li>
    Ceremony & reception spaces
   </li>
   <li>
    Tables, chairs & linens
   </li>
   <li>
    Bridal suite access
   </li>
   <li>
    Setup & breakdown assistance
   </li>
  </ul>
  <button class="package-btn">
   Learn More
  </button>
 </div>
</div>

$5,500 / up to 150 guests

.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-body {
            padding: 40px 30px;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Card Featured

CARDS html> comp-26

A cards component containing buttons. Contains 13 child elements.

Classic

10-hour venue rental
Full property access
Premium décor package
Both suites included
Day-before setup time
Co...

<div class="package-card featured">
 <div class="package-header">
  <h3 class="package-name">
   Classic
  </h3>
  <div class="package-price">
   $5,500
   <span>
    / up to 150 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    10-hour venue rental
   </li>
   <li>
    Full property access
   </li>
   <li>
    Premium décor package
   </li>
   <li>
    Both suites included
   </li>
   <li>
    Day-before setup time
   </li>
   <li>
    Complimentary rehearsal
   </li>
  </ul>
  <button class="package-btn">
   Most Popular Choice
  </button>
 </div>
</div>

$8,500 / up to 300 guests

.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-body {
            padding: 40px 30px;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Card

CARDS html> comp-27

A cards component containing buttons. Contains 13 child elements.

Grand

Full weekend rental
All venue spaces included
Luxury décor collection
Golf cart transportation
Fire pit & s'mores bar
...

<div class="package-card">
 <div class="package-header">
  <h3 class="package-name">
   Grand
  </h3>
  <div class="package-price">
   $8,500
   <span>
    / up to 300 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    Full weekend rental
   </li>
   <li>
    All venue spaces included
   </li>
   <li>
    Luxury décor collection
   </li>
   <li>
    Golf cart transportation
   </li>
   <li>
    Fire pit & s'mores bar
   </li>
   <li>
    Morning-after brunch setup
   </li>
  </ul>
  <button class="package-btn">
   Ultimate Experience
  </button>
 </div>
</div>

.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-body {
            padding: 40px 30px;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Blog Card

CARDS html> comp-28

A cards component containing images, links. Contains 10 child elements.

Real Weddings

A Magical Fall Wedding: Sarah & Tom's Story

When the autumn leaves ...

<article class="blog-card">
 <div class="blog-image">
  <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
  <span class="blog-category">
   Real Weddings
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 15, 2024
   </span>
   <span>
    5 min read
   </span>
  </div>
  <h3 class="blog-title">
   A Magical Fall Wedding: Sarah & Tom's Story
  </h3>
  <p class="blog-excerpt">
   When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
  </p>
  <a class="read-more" href="#">
   Read Story
  </a>
 </div>
</article>

October 10, 2024 3 min read

.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Cards - Blog Card

CARDS html> comp-29

A cards component containing images, links. Contains 10 child elements.

Planning Tips

10 Ways to Personalize Your Barn Wedding

From custom signage to fam...

<article class="blog-card">
 <div class="blog-image">
  <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
  <span class="blog-category">
   Planning Tips
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 10, 2024
   </span>
   <span>
    3 min read
   </span>
  </div>
  <h3 class="blog-title">
   10 Ways to Personalize Your Barn Wedding
  </h3>
  <p class="blog-excerpt">
   From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
  </p>
  <a class="read-more" href="#">
   Read More
  </a>
 </div>
</article>

October 5, 2024 4 min read

.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Cards - Blog Card

CARDS html> comp-30

A cards component containing images, links. Contains 10 child elements.

Seasonal Guide

Why Minnesota Summers Make Perfect Weddings

Long golden hours, warm b...

<article class="blog-card">
 <div class="blog-image">
  <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
  <span class="blog-category">
   Seasonal Guide
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 5, 2024
   </span>
   <span>
    4 min read
   </span>
  </div>
  <h3 class="blog-title">
   Why Minnesota Summers Make Perfect Weddings
  </h3>
  <p class="blog-excerpt">
   Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
  </p>
  <a class="read-more" href="#">
   Read Guide
  </a>
 </div>
</article>

.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Cards - Services Reveal Section Shape Top Shape An

CARDS html> comp-31

A cards component containing images. Contains 23 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations, we're here for all of life's milestones

<section class="services-reveal section-shape-top shape--angle">
 <div class="container">
  <div class="services-header">
   <h2>
    Celebrate Every Moment
   </h2>
   <p class="subtitle">
    From intimate gatherings to grand celebrations, we're here for all of life's milestones
   </p>
  </div>
  <div class="services-cards">
   <div class="service-card">
    <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $5,000
     </span>
     <h3 class="service-title">
      Weddings
     </h3>
     <p class="service-description">
      Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $2,000
     </span>
     <h3 class="service-title">
      Corporate Events
     </h3>
     <p class="service-description">
      Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $1,500
     </span>
     <h3 class="service-title">
      Celebrations
     </h3>
     <p class="service-description">
      Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Soft Curve Divider Bottom -->
</section>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.services-header .subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.service-title {
            transform: translateY(-10px);
        }
.service-bg {
            transform: scale(1.1);
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.container {
                padding: 0 20px;
            }
.subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }
.section-shape-top { 
            position: relative; 
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.services-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.services-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.services-reveal {
            padding: 120px 0;
            background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(139, 99, 55, 0.05)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>'), linear-gradient(180deg, var(--warm-cream) 0%, white 100%);
            background-repeat: repeat, no-repeat;
            background-size: 60px 60px, 100% 100%;
            background-position: top left, center;
            position: relative;
        }
.services-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }

Cards - Service Overlay

CARDS html> comp-35

A cards component. Contains 3 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.

<div class="service-overlay">
 <span class="service-price">
  From $5,000
 </span>
 <h3 class="service-title">
  Weddings
 </h3>
 <p class="service-description">
  Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
 </p>
</div>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }

Cards - Service Overlay

CARDS html> comp-37

A cards component. Contains 3 child elements.

From $2,000

Corporate Events

Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.

<div class="service-overlay">
 <span class="service-price">
  From $2,000
 </span>
 <h3 class="service-title">
  Corporate Events
 </h3>
 <p class="service-description">
  Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
 </p>
</div>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }

Cards - Service Overlay

CARDS html> comp-39

A cards component. Contains 3 child elements.

From $1,500

Celebrations

Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.

<div class="service-overlay">
 <span class="service-price">
  From $1,500
 </span>
 <h3 class="service-title">
  Celebrations
 </h3>
 <p class="service-description">
  Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
 </p>
</div>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-title {
            transform: translateY(-10px);
        }

Cards - Packages Section Section Shape Top Shape S

CARDS html> comp-40

A cards component containing buttons. Contains 46 child elements.

Investment in Memories

Wedding Packages

Intimate

$3,500 / up to 75 guests

<section class="packages-section section-shape-top shape--split">
 <div class="container">
  <div class="packages-header">
   <p class="script-font">
    Investment in Memories
   </p>
   <h2>
    Wedding Packages
   </h2>
  </div>
  <div class="packages-grid">
   <div class="package-card">
    <div class="package-header">
     <h3 class="package-name">
      Intimate
     </h3>
     <div class="package-price">
      $3,500
      <span>
       / up to 75 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       6-hour venue rental
      </li>
      <li>
       Ceremony & reception spaces
      </li>
      <li>
       Tables, chairs & linens
      </li>
      <li>
       Bridal suite access
      </li>
      <li>
       Setup & breakdown assistance
      </li>
     </ul>
     <button class="package-btn">
      Learn More
     </button>
    </div>
   </div>
   <div class="package-card featured">
    <div class="package-header">
     <h3 class="package-name">
      Classic
     </h3>
     <div class="package-price">
      $5,500
      <span>
       / up to 150 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       10-hour venue rental
      </li>
      <li>
       Full property access
      </li>
      <li>
       Premium décor package
      </li>
      <li>
       Both suites included
      </li>
      <li>
       Day-before setup time
      </li>
      <li>
       Complimentary rehearsal
      </li>
     </ul>
     <button class="package-btn">
      Most Popular Choice
     </button>
    </div>
   </div>
   <div class="package-card">
    <div class="package-header">
     <h3 class="package-name">
      Grand
     </h3>
     <div class="package-price">
      $8,500
      <span>
       / up to 300 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       Full weekend rental
      </li>
      <li>
       All venue spaces included
      </li>
      <li>
       Luxury décor collection
      </li>
      <li>
       Golf cart transportation
      </li>
      <li>
       Fire pit & s'mores bar
      </li>
      <li>
       Morning-after brunch setup
      </li>
     </ul>
     <button class="package-btn">
      Ultimate Experience
     </button>
    </div>
   </div>
  </div>
 </div>
</section>

.packages-grid,
            .services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.script-font {
            color: var(--accent-gold);
        }
.script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.package-header {
            background: linear-gradient(135deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
.packages-section.section-shape-top::after {
  background: var(--soft-white) !important;
}
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.package-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.package-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.package-name {
            font-size: 28px;
            margin-bottom: 10px;
        }
.package-body {
            padding: 40px 30px;
        }
.container {
                padding: 0 20px;
            }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            position: relative;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.packages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }
.section-shape-top { 
            position: relative; 
        }
.packages-section {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--soft-white) 0%, var(--warm-cream) 100%);
            position: relative;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.package-price {
            font-size: 42px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.packages-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: 20px;
            right: -30px;
            background: var(--wine);
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            letter-spacing: 1px;
            z-index: 1;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.shape--split { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0 L0,40 L600,70 L1200,40 L1200,0 L1200,120 L0,120 Z" fill="white"/></svg>'); 
            --shape-h: 60px;
        }
.packages-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.package-price span {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.packages-header {
            text-align: center;
            margin-bottom: 80px;
        }
.package-card.featured {
            transform: scale(1.05);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Body

CARDS html> comp-45

A cards component containing buttons. Contains 7 child elements.

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens
Bridal suite access
Setup & breakdown assistance

<div class="package-body">
 <ul class="package-features">
  <li>
   6-hour venue rental
  </li>
  <li>
   Ceremony & reception spaces
  </li>
  <li>
   Tables, chairs & linens
  </li>
  <li>
   Bridal suite access
  </li>
  <li>
   Setup & breakdown assistance
  </li>
 </ul>
 <button class="package-btn">
  Learn More
 </button>
</div>

.package-body {
            padding: 40px 30px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Features

CARDS html> comp-46

A cards component. Contains 5 child elements.

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens
Bridal suite access
Setup & breakdown assistance

<ul class="package-features">
 <li>
  6-hour venue rental
 </li>
 <li>
  Ceremony & reception spaces
 </li>
 <li>
  Tables, chairs & linens
 </li>
 <li>
  Bridal suite access
 </li>
 <li>
  Setup & breakdown assistance
 </li>
</ul>

.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }

Cards - Package Body

CARDS html> comp-49

A cards component containing buttons. Contains 8 child elements.

10-hour venue rental
Full property access
Premium décor package
Both suites included
Day-before setup time
Complimentary rehearsal

<div class="package-body">
 <ul class="package-features">
  <li>
   10-hour venue rental
  </li>
  <li>
   Full property access
  </li>
  <li>
   Premium décor package
  </li>
  <li>
   Both suites included
  </li>
  <li>
   Day-before setup time
  </li>
  <li>
   Complimentary rehearsal
  </li>
 </ul>
 <button class="package-btn">
  Most Popular Choice
 </button>
</div>

.package-body {
            padding: 40px 30px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Features

CARDS html> comp-50

A cards component. Contains 6 child elements.

10-hour venue rental
Full property access
Premium décor package
Both suites included
Day-before setup time
Complimentary rehearsal

<ul class="package-features">
 <li>
  10-hour venue rental
 </li>
 <li>
  Full property access
 </li>
 <li>
  Premium décor package
 </li>
 <li>
  Both suites included
 </li>
 <li>
  Day-before setup time
 </li>
 <li>
  Complimentary rehearsal
 </li>
</ul>

.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }

Cards - Package Body

CARDS html> comp-53

A cards component containing buttons. Contains 8 child elements.

Full weekend rental
All venue spaces included
Luxury décor collection
Golf cart transportation
Fire pit & s'mores bar
Morning-after brunch setup

<div class="package-body">
 <ul class="package-features">
  <li>
   Full weekend rental
  </li>
  <li>
   All venue spaces included
  </li>
  <li>
   Luxury décor collection
  </li>
  <li>
   Golf cart transportation
  </li>
  <li>
   Fire pit & s'mores bar
  </li>
  <li>
   Morning-after brunch setup
  </li>
 </ul>
 <button class="package-btn">
  Ultimate Experience
 </button>
</div>

.package-body {
            padding: 40px 30px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }
.package-btn {
            width: 100%;
            padding: 18px;
            background: var(--accent-gold);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-btn:hover {
            background: var(--primary-brown);
            transform: translateY(-2px);
        }

Cards - Package Features

CARDS html> comp-54

A cards component. Contains 6 child elements.

Full weekend rental
All venue spaces included
Luxury décor collection
Golf cart transportation
Fire pit & s'mores bar
Morning-after brunch setup

<ul class="package-features">
 <li>
  Full weekend rental
 </li>
 <li>
  All venue spaces included
 </li>
 <li>
  Luxury décor collection
 </li>
 <li>
  Golf cart transportation
 </li>
 <li>
  Fire pit & s'mores bar
 </li>
 <li>
  Morning-after brunch setup
 </li>
</ul>

.package-features {
            list-style: none;
            margin-bottom: 40px;
        }
.package-features li::before {
            content: '✓';
            color: var(--accent-gold);
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
        }
.package-features li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-dark);
            display: flex;
            align-items: center;
        }

Sections - Alternating Blocks Section Shape Top Sh

SECTIONS html> comp-55

A sections component containing images, buttons, links. Contains 43 child elements.

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

Climate-...

<section class="alternating-blocks section-shape-top shape--subtle-wave">
 <div class="container">
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     01
    </div>
    <h3>
     The Historic Barn
    </h3>
    <p>
     Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
    </p>
    <ul class="feature-list">
     <li>
      Climate-controlled comfort year-round
     </li>
     <li>
      Original exposed beam architecture
     </li>
     <li>
      Capacity for up to 300 guests
     </li>
     <li>
      State-of-the-art lighting system
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Explore The Barn
    </a>
   </div>
   <div class="block-image">
    <img alt="Historic barn interior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
    <span class="image-badge">
     100+ Years
    </span>
   </div>
  </div>
  <div class="block-item reverse">
   <div class="block-content">
    <div class="number">
     02
    </div>
    <h3>
     Vineyard Ceremonies
    </h3>
    <p>
     Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
    </p>
    <ul class="feature-list">
     <li>
      Sunset ceremony perfection
     </li>
     <li>
      Natural amphitheater setting
     </li>
     <li>
      Rain backup in covered pavilion
     </li>
     <li>
      Complimentary wine tasting for couples
     </li>
    </ul>
    <a class="btn-outline" href="#">
     View Ceremony Sites
    </a>
   </div>
   <div class="block-image">
    <img alt="Vineyard ceremony site" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
    <span class="image-badge">
     5 Locations
    </span>
   </div>
  </div>
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     03
    </div>
    <h3>
     Enchanted Forest
    </h3>
    <p>
     Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
    </p>
    <ul class="feature-list">
     <li>
      Professional trail lighting available
     </li>
     <li>
      Hidden clearings for portraits
     </li>
     <li>
      Seasonal wildflower meadows
     </li>
     <li>
      Private couple's photography hour
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Discover The Grounds
    </a>
   </div>
   <div class="block-image">
    <img alt="Forest wedding photos" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
    <span class="image-badge">
     400 Acres
    </span>
   </div>
  </div>
 </div>
 <!-- Angle Divider Bottom -->
</section>

.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.alternating-blocks .btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.alternating-blocks p,
        .alternating-blocks .feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.reverse {
            direction: rtl;
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.reverse {
                direction: ltr;
            }
.reverse .block-content {
            direction: ltr;
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.alternating-blocks.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.alternating-blocks .btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.alternating-blocks {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-bg) 0%, var(--medium-bg) 100%);
            position: relative;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.shape--subtle-wave { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.alternating-blocks h3,
        .alternating-blocks .number {
            color: white;
        }

Sections - Team Section Section Shape Top Shape Su

SECTIONS html> comp-59

A sections component containing images. Contains 29 child elements.

Meet Your Hosts

The Family Behind the Farm

John & Mary Thompson

<section class="team-section section-shape-top shape--subtle-wave">
 <div class="container">
  <div class="team-header">
   <p class="script-font">
    Meet Your Hosts
   </p>
   <h2>
    The Family Behind the Farm
   </h2>
  </div>
  <div class="team-carousel">
   <div class="team-member">
    <div class="member-image">
     <img alt="John" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"/>
    </div>
    <h3 class="member-name">
     John & Mary Thompson
    </h3>
    <p class="member-role">
     Owners
    </p>
    <p class="member-bio">
     Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.
    </p>
   </div>
   <div class="team-member">
    <div class="member-image">
     <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400"/>
    </div>
    <h3 class="member-name">
     Sarah Mitchell
    </h3>
    <p class="member-role">
     Event Coordinator
    </p>
    <p class="member-bio">
     With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.
    </p>
   </div>
   <div class="team-member">
    <div class="member-image">
     <img alt="Michael" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400"/>
    </div>
    <h3 class="member-name">
     Michael Rivers
    </h3>
    <p class="member-role">
     Grounds Manager
    </p>
    <p class="member-bio">
     Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.
    </p>
   </div>
   <div class="team-member">
    <div class="member-image">
     <img alt="Emily" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"/>
    </div>
    <h3 class="member-name">
     Emily Chen
    </h3>
    <p class="member-role">
     Guest Relations
    </p>
    <p class="member-bio">
     Your first point of contact, Emily helps couples envision and plan their perfect day.
    </p>
   </div>
  </div>
 </div>
 <!-- Angle Divider Bottom Inverted -->
</section>

.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.team-section .member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.team-header h2,
        .team-section .member-name {
            color: white;
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.team-header h2 {
            font-size: 48px;
            margin-bottom: 20px;
        }
.container {
                padding: 0 20px;
            }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.team-member {
            text-align: center;
            position: relative;
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.team-header .script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.section-shape-top { 
            position: relative; 
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            color: white;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.team-section {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--wine) 0%, var(--deep-brown) 100%);
            position: relative;
        }
.team-section .team-header h2,
        .team-section .member-name {
            color: white;
        }
.member-image img {
            transform: scale(1.1);
        }
.team-header .script-font {
            color: var(--accent-gold);
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.team-carousel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
.shape--subtle-wave { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.team-section .team-header .script-font {
            color: var(--accent-gold);
        }
.script-font {
            color: var(--accent-gold);
        }
.team-header {
            text-align: center;
            margin-bottom: 80px;
        }

Sections - Blog Section Section Shape Top Shape An

SECTIONS html> comp-60

A sections component containing images, buttons, links. Contains 40 child elements.

Stories from the Barn

Wedding inspiration, planning tips, and real celebrations

View All Posts

<section class="blog-section section-shape-top shape--angle">
 <div class="container">
  <div class="blog-header">
   <div class="blog-header-text">
    <h2>
     Stories from the Barn
    </h2>
    <p>
     Wedding inspiration, planning tips, and real celebrations
    </p>
   </div>
   <a class="btn-outline" href="#">
    View All Posts
   </a>
  </div>
  <div class="blog-grid">
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
     <span class="blog-category">
      Real Weddings
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 15, 2024
      </span>
      <span>
       5 min read
      </span>
     </div>
     <h3 class="blog-title">
      A Magical Fall Wedding: Sarah & Tom's Story
     </h3>
     <p class="blog-excerpt">
      When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
     </p>
     <a class="read-more" href="#">
      Read Story
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
     <span class="blog-category">
      Planning Tips
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 10, 2024
      </span>
      <span>
       3 min read
      </span>
     </div>
     <h3 class="blog-title">
      10 Ways to Personalize Your Barn Wedding
     </h3>
     <p class="blog-excerpt">
      From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
     </p>
     <a class="read-more" href="#">
      Read More
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
     <span class="blog-category">
      Seasonal Guide
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 5, 2024
      </span>
      <span>
       4 min read
      </span>
     </div>
     <h3 class="blog-title">
      Why Minnesota Summers Make Perfect Weddings
     </h3>
     <p class="blog-excerpt">
      Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
     </p>
     <a class="read-more" href="#">
      Read Guide
     </a>
    </div>
   </article>
  </div>
 </div>
 <!-- Soft Curve Bottom to Sage -->
</section>

.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.section-shape-top::after {
  background: var(--soft-white) !important;
}
.section-shape-top::after { 
  background: var(--deep-brown) !important; 
}
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.blog-section.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.blog-header-text p {
            color: var(--text-light);
            font-size: 18px;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.section-shape-top::after { 
  background: var(--dark-bg) !important; 
}
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.section-shape-top::after {
  background: var(--warm-cream) !important;
}
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.blog-content {
            padding: 35px;
        }
.blog-image img {
            transform: scale(1.1);
        }
.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.read-more:hover {
            color: var(--primary-brown);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            flex-wrap: wrap;
            gap: 30px;
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.blog-section {
            padding: 120px 0;
            background: white;
            position: relative;
        }
.blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-header-text h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 10px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.section-shape-top::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(0.5px);
            pointer-events: none;
            z-index: 1;
        }
.blog-header {
                flex-direction: column;
                align-items: flex-start;
            }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }

Sections - Map Section

SECTIONS html> comp-62

A sections component. Contains 33 child elements.

Find Your Way to Forever

Address

12500 Rum River Drive
Princeton, MN 55371

<section class="map-section">
 <div class="map-container">
  <div class="map-info">
   <h2>
    Find Your Way to Forever
   </h2>
   <div class="location-details">
    <div class="location-item">
     <div class="location-icon">
      📍
     </div>
     <div class="location-text">
      <h4>
       Address
      </h4>
      <p>
       12500 Rum River Drive
       <br/>
       Princeton, MN 55371
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      🚗
     </div>
     <div class="location-text">
      <h4>
       Easy Access From
      </h4>
      <p>
       45 min from Minneapolis
       <br/>
       30 min from St. Cloud
       <br/>
       1 hour from Brainerd
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      ✈️
     </div>
     <div class="location-text">
      <h4>
       Nearest Airport
      </h4>
      <p>
       Minneapolis-St. Paul International
       <br/>
       55 miles (1 hour drive)
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      🏨
     </div>
     <div class="location-text">
      <h4>
       Accommodations
      </h4>
      <p>
       Partner hotels in Princeton & Milaca
       <br/>
       Group rates available
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="map-embed">
   <div class="map-placeholder">
    <p>
     Interactive Map
    </p>
    <p style="font-size: 16px; margin-top: 10px;">
     Click to view on Google Maps
    </p>
   </div>
  </div>
 </div>
</section>

.location-details {
            margin-bottom: 40px;
        }
.map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.map-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.map-info {
                padding: 40px 20px;
            }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.map-info {
            padding: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.map-embed {
            background: var(--deep-brown);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }
.map-section {
            padding: 0;
            background: var(--warm-cream);
            position: relative;
        }
.map-info h2 {
            font-size: 42px;
            color: var(--deep-brown);
            margin-bottom: 30px;
        }
.map-section.section-shape-top::after {
  background: var(--soft-white) !important;
}
.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.map-embed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
        }

Sections - Social Proof

SECTIONS html> comp-70

A sections component. Contains 9 child elements.

<section class="social-proof">
 <div class="container social-content">
  <div class="social-logos">
   <span class="social-logo">
    The Knot
   </span>
   <span class="social-logo">
    WeddingWire
   </span>
   <span class="social-logo">
    Martha Stewart
   </span>
   <span class="social-logo">
    Minnesota Bride
   </span>
  </div>
  <p class="social-text">
   "Rum River Barn isn't just a venue—it's
   <span class="highlight">
    where dreams come to life
   </span>
   . 
                Their commitment to saying 'yes' to every couple's vision sets them apart as
   <span class="highlight">
    Minnesota's most accommodating wedding destination
   </span>
   ."
  </p>
 </div>
</section>

.social-proof {
            padding: 80px 0;
            background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255, 255, 255, 0.1)"/><circle cx="90" cy="30" r="1" fill="rgba(255, 255, 255, 0.1)"/><circle cx="50" cy="50" r="1" fill="rgba(255, 255, 255, 0.1)"/><circle cx="30" cy="80" r="1" fill="rgba(255, 255, 255, 0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23stars)"/></svg>'), linear-gradient(90deg, var(--sage-green) 0%, var(--deep-brown) 100%);
            background-repeat: repeat, no-repeat;
            background-size: 100px 100px, 100% 100%;
            background-position: top left, center;
            position: relative;
            overflow: hidden;
        }
.social-text {
            font-size: 32px;
            color: white;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }
.social-content {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.social-logos {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            opacity: 0.6;
        }
.container {
                padding: 0 20px;
            }
.social-text .highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-proof.section-shape-top::after { 
  /* left-most stop for its horizontal gradient isn't relevant at the top seam,
     but we keep it consistent with the section's start color */
  background: var(--sage-green) !important; 
}
.social-logo {
            color: white;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

Sections - Feature List

SECTIONS html> comp-73

A sections component. Contains 4 child elements.

Climate-controlled comfort year-round
Original exposed beam architecture
Capacity for up to 300 guests
State-of-the-art lighting system

<ul class="feature-list">
 <li>
  Climate-controlled comfort year-round
 </li>
 <li>
  Original exposed beam architecture
 </li>
 <li>
  Capacity for up to 300 guests
 </li>
 <li>
  State-of-the-art lighting system
 </li>
</ul>

.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }

Sections - Feature List

SECTIONS html> comp-74

A sections component. Contains 4 child elements.

Sunset ceremony perfection
Natural amphitheater setting
Rain backup in covered pavilion
Complimentary wine tasting for couples

<ul class="feature-list">
 <li>
  Sunset ceremony perfection
 </li>
 <li>
  Natural amphitheater setting
 </li>
 <li>
  Rain backup in covered pavilion
 </li>
 <li>
  Complimentary wine tasting for couples
 </li>
</ul>

.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }

Sections - Feature List

SECTIONS html> comp-75

A sections component. Contains 4 child elements.

Professional trail lighting available
Hidden clearings for portraits
Seasonal wildflower meadows
Private couple's photography hour

<ul class="feature-list">
 <li>
  Professional trail lighting available
 </li>
 <li>
  Hidden clearings for portraits
 </li>
 <li>
  Seasonal wildflower meadows
 </li>
 <li>
  Private couple's photography hour
 </li>
</ul>

.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }

Sections - Venue Features

SECTIONS html> comp-76

A sections component. Contains 12 child elements.

Capacity

Up to 300 guests

Features

Built-in bar & dance floor

Lighting

Edison bulbs & chandeliers

Climate

Heated & air conditioned

<div class="venue-features">
 <div class="venue-feature">
  <h5>
   Capacity
  </h5>
  <p>
   Up to 300 guests
  </p>
 </div>
 <div class="venue-feature">
  <h5>
   Features
  </h5>
  <p>
   Built-in bar & dance floor
  </p>
 </div>
 <div class="venue-feature">
  <h5>
   Lighting
  </h5>
  <p>
   Edison bulbs & chandeliers
  </p>
 </div>
 <div class="venue-feature">
  <h5>
   Climate
  </h5>
  <p>
   Heated & air conditioned
  </p>
 </div>
</div>

.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-77

A sections component. Contains 2 child elements.

Capacity

Up to 300 guests

<div class="venue-feature">
 <h5>
  Capacity
 </h5>
 <p>
  Up to 300 guests
 </p>
</div>

.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-78

A sections component. Contains 2 child elements.

Features

Built-in bar & dance floor

<div class="venue-feature">
 <h5>
  Features
 </h5>
 <p>
  Built-in bar & dance floor
 </p>
</div>

.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-79

A sections component. Contains 2 child elements.

Lighting

Edison bulbs & chandeliers

<div class="venue-feature">
 <h5>
  Lighting
 </h5>
 <p>
  Edison bulbs & chandeliers
 </p>
</div>

.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Venue Feature

SECTIONS html> comp-80

A sections component. Contains 2 child elements.

Climate

Heated & air conditioned

<div class="venue-feature">
 <h5>
  Climate
 </h5>
 <p>
  Heated & air conditioned
 </p>
</div>

.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }

Sections - Block Content

SECTIONS html> comp-86

A sections component containing buttons, links. Contains 9 child elements.

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

Climate-controlled comfort year-round
Original exposed beam architecture
Capacity for up to 300 guests
State-of-the-art...

<div class="block-content">
 <div class="number">
  01
 </div>
 <h3>
  The Historic Barn
 </h3>
 <p>
  Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
 </p>
 <ul class="feature-list">
  <li>
   Climate-controlled comfort year-round
  </li>
  <li>
   Original exposed beam architecture
  </li>
  <li>
   Capacity for up to 300 guests
  </li>
  <li>
   State-of-the-art lighting system
  </li>
 </ul>
 <a class="btn-outline" href="#">
  Explore The Barn
 </a>
</div>

.block-content {
            padding: 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.number {
            color: white;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Sections - Block Content

SECTIONS html> comp-87

A sections component containing buttons, links. Contains 9 child elements.

02

Vineyard Ceremonies

Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.

Sunset ceremony perfection
Natural amphitheater setting
Rain backup in covered pavilion
Complimentary wine tasting for couples

<div class="block-content">
 <div class="number">
  02
 </div>
 <h3>
  Vineyard Ceremonies
 </h3>
 <p>
  Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
 </p>
 <ul class="feature-list">
  <li>
   Sunset ceremony perfection
  </li>
  <li>
   Natural amphitheater setting
  </li>
  <li>
   Rain backup in covered pavilion
  </li>
  <li>
   Complimentary wine tasting for couples
  </li>
 </ul>
 <a class="btn-outline" href="#">
  View Ceremony Sites
 </a>
</div>

.block-content {
            padding: 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.number {
            color: white;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Sections - Block Content

SECTIONS html> comp-88

A sections component containing buttons, links. Contains 9 child elements.

03

Enchanted Forest

Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.

Professional trail lighting available
Hidden clearings for portraits
Seasonal wildflower meadows
Private couple's photography hour <...

<div class="block-content">
 <div class="number">
  03
 </div>
 <h3>
  Enchanted Forest
 </h3>
 <p>
  Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
 </p>
 <ul class="feature-list">
  <li>
   Professional trail lighting available
  </li>
  <li>
   Hidden clearings for portraits
  </li>
  <li>
   Seasonal wildflower meadows
  </li>
  <li>
   Private couple's photography hour
  </li>
 </ul>
 <a class="btn-outline" href="#">
  Discover The Grounds
 </a>
</div>

.block-content {
            padding: 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.number {
            color: white;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Sections - Container Venue Content

SECTIONS html> comp-89

A sections component containing images, buttons. Contains 27 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

<div class="container venue-content">
 <div class="venue-header">
  <h2>
   Explore Our Spaces
  </h2>
  <p>
   Every corner tells a story, every space creates memories
  </p>
 </div>
 <div class="venue-tabs">
  <button class="venue-tab active">
   The Barn
  </button>
  <button class="venue-tab">
   Bridal Suite
  </button>
  <button class="venue-tab">
   Groom's Quarters
  </button>
  <button class="venue-tab">
   Garden Pavilion
  </button>
 </div>
 <div class="venue-display">
  <div class="venue-main-image">
   <img alt="Barn interior" src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?w=800"/>
  </div>
  <div class="venue-details">
   <h3>
    The Historic Barn
   </h3>
   <p>
    Our crown jewel, this beautifully restored barn features soaring ceilings, original timber beams, and modern amenities seamlessly integrated into its historic charm.
   </p>
   <div class="venue-features">
    <div class="venue-feature">
     <h5>
      Capacity
     </h5>
     <p>
      Up to 300 guests
     </p>
    </div>
    <div class="venue-feature">
     <h5>
      Features
     </h5>
     <p>
      Built-in bar & dance floor
     </p>
    </div>
    <div class="venue-feature">
     <h5>
      Lighting
     </h5>
     <p>
      Edison bulbs & chandeliers
     </p>
    </div>
    <div class="venue-feature">
     <h5>
      Climate
     </h5>
     <p>
      Heated & air conditioned
     </p>
    </div>
   </div>
  </div>
 </div>
</div>

.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.venue-display {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 60px;
            align-items: center;
        }
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.container {
                padding: 0 20px;
            }
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.venue-content {
            position: relative;
            z-index: 1;
        }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
.venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.venue-details p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }
.venue-details {
            color: white;
        }
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.venue-main-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
        }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }
.venue-details h3 {
            font-size: 36px;
            margin-bottom: 25px;
            color: var(--accent-gold);
        }

Sections - Blog Content

SECTIONS html> comp-90

A sections component containing links. Contains 6 child elements.

A Magical Fall Wedding: Sarah & Tom's Story

When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...

Read Story

<div class="blog-content">
 <div class="blog-meta">
  <span>
   October 15, 2024
  </span>
  <span>
   5 min read
  </span>
 </div>
 <h3 class="blog-title">
  A Magical Fall Wedding: Sarah & Tom's Story
 </h3>
 <p class="blog-excerpt">
  When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
 </p>
 <a class="read-more" href="#">
  Read Story
 </a>
</div>

October 10, 2024 3 min read

.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Sections - Blog Content

SECTIONS html> comp-91

A sections component containing links. Contains 6 child elements.

10 Ways to Personalize Your Barn Wedding

From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...

Sections - Blog Content

SECTIONS html> comp-92

A sections component containing links. Contains 6 child elements.

October 5, 2024 4 min read

Why Minnesota Summers Make Perfect Weddings

Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...

Read Guide

<div class="blog-content">
 <div class="blog-meta">
  <span>
   October 5, 2024
  </span>
  <span>
   4 min read
  </span>
 </div>
 <h3 class="blog-title">
  Why Minnesota Summers Make Perfect Weddings
 </h3>
 <p class="blog-excerpt">
  Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
 </p>
 <a class="read-more" href="#">
  Read Guide
 </a>
</div>

.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.blog-content {
            padding: 35px;
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }

Sections - Container Social Content

SECTIONS html> comp-93

A sections component. Contains 8 child elements.

<div class="container social-content">
 <div class="social-logos">
  <span class="social-logo">
   The Knot
  </span>
  <span class="social-logo">
   WeddingWire
  </span>
  <span class="social-logo">
   Martha Stewart
  </span>
  <span class="social-logo">
   Minnesota Bride
  </span>
 </div>
 <p class="social-text">
  "Rum River Barn isn't just a venue—it's
  <span class="highlight">
   where dreams come to life
  </span>
  . 
                Their commitment to saying 'yes' to every couple's vision sets them apart as
  <span class="highlight">
   Minnesota's most accommodating wedding destination
  </span>
  ."
 </p>
</div>

.social-content {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.social-text {
            font-size: 32px;
            color: white;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }
.social-logos {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            opacity: 0.6;
        }
.container {
                padding: 0 20px;
            }
.social-text .highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-logo {
            color: white;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

Sections - Block Item

SECTIONS html> comp-95

A sections component containing images, buttons, links. Contains 13 child elements.

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

Climate-controlled comfort year-round
Original exposed beam architecture
Capacity for up to 3...

<div class="block-item">
 <div class="block-content">
  <div class="number">
   01
  </div>
  <h3>
   The Historic Barn
  </h3>
  <p>
   Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
  </p>
  <ul class="feature-list">
   <li>
    Climate-controlled comfort year-round
   </li>
   <li>
    Original exposed beam architecture
   </li>
   <li>
    Capacity for up to 300 guests
   </li>
   <li>
    State-of-the-art lighting system
   </li>
  </ul>
  <a class="btn-outline" href="#">
   Explore The Barn
  </a>
 </div>
 <div class="block-image">
  <img alt="Historic barn interior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
  <span class="image-badge">
   100+ Years
  </span>
 </div>
</div>

.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }

Sections - Block Item Reverse

SECTIONS html> comp-97

A sections component containing images, buttons, links. Contains 13 child elements.

02

Vineyard Ceremonies

Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.

Sunset ceremony perfection
Natural amphitheater setting
Rain backup in covered pavilion
...

<div class="block-item reverse">
 <div class="block-content">
  <div class="number">
   02
  </div>
  <h3>
   Vineyard Ceremonies
  </h3>
  <p>
   Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
  </p>
  <ul class="feature-list">
   <li>
    Sunset ceremony perfection
   </li>
   <li>
    Natural amphitheater setting
   </li>
   <li>
    Rain backup in covered pavilion
   </li>
   <li>
    Complimentary wine tasting for couples
   </li>
  </ul>
  <a class="btn-outline" href="#">
   View Ceremony Sites
  </a>
 </div>
 <div class="block-image">
  <img alt="Vineyard ceremony site" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
  <span class="image-badge">
   5 Locations
  </span>
 </div>
</div>

.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.reverse {
                direction: ltr;
            }
.reverse .block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }

Sections - Block Item

SECTIONS html> comp-99

A sections component containing images, buttons, links. Contains 13 child elements.

03

Enchanted Forest

Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.

Professional trail lighting available
Hidden clearings for portraits
Seasonal wildflower meadows

<div class="block-item">
 <div class="block-content">
  <div class="number">
   03
  </div>
  <h3>
   Enchanted Forest
  </h3>
  <p>
   Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
  </p>
  <ul class="feature-list">
   <li>
    Professional trail lighting available
   </li>
   <li>
    Hidden clearings for portraits
   </li>
   <li>
    Seasonal wildflower meadows
   </li>
   <li>
    Private couple's photography hour
   </li>
  </ul>
  <a class="btn-outline" href="#">
   Discover The Grounds
  </a>
 </div>
 <div class="block-image">
  <img alt="Forest wedding photos" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
  <span class="image-badge">
   400 Acres
  </span>
 </div>
</div>

.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.block-item:last-child {
            margin-bottom: 0;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }

Sliders - Team Carousel

SLIDERS html> comp-104

A sliders component containing images. Contains 24 child elements.

John & Mary Thompson

Owners

Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.

<div class="team-carousel">
 <div class="team-member">
  <div class="member-image">
   <img alt="John" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"/>
  </div>
  <h3 class="member-name">
   John & Mary Thompson
  </h3>
  <p class="member-role">
   Owners
  </p>
  <p class="member-bio">
   Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.
  </p>
 </div>
 <div class="team-member">
  <div class="member-image">
   <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400"/>
  </div>
  <h3 class="member-name">
   Sarah Mitchell
  </h3>
  <p class="member-role">
   Event Coordinator
  </p>
  <p class="member-bio">
   With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.
  </p>
 </div>
 <div class="team-member">
  <div class="member-image">
   <img alt="Michael" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400"/>
  </div>
  <h3 class="member-name">
   Michael Rivers
  </h3>
  <p class="member-role">
   Grounds Manager
  </p>
  <p class="member-bio">
   Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.
  </p>
 </div>
 <div class="team-member">
  <div class="member-image">
   <img alt="Emily" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"/>
  </div>
  <h3 class="member-name">
   Emily Chen
  </h3>
  <p class="member-role">
   Guest Relations
  </p>
  <p class="member-bio">
   Your first point of contact, Emily helps couples envision and plan their perfect day.
  </p>
 </div>
</div>

.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.team-carousel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Venue Tabs

TABS html> comp-105

A tabs component containing buttons. Contains 4 child elements.

<div class="venue-tabs">
 <button class="venue-tab active">
  The Barn
 </button>
 <button class="venue-tab">
  Bridal Suite
 </button>
 <button class="venue-tab">
  Groom's Quarters
 </button>
 <button class="venue-tab">
  Garden Pavilion
 </button>
</div>

View Gallery Check Availability

.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }

Buttons - Btn Group

BUTTONS html> comp-113

A buttons component containing buttons, links. Contains 2 child elements.

<div class="btn-group">
 <a class="btn-outline" href="#">
  View Gallery
 </a>
 <a class="btn-outline" href="#">
  Check Availability
 </a>
</div>

.btn-outline-light {
            border-color: white;
            color: white;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Teams - Team Member

TEAMS html> comp-117

A teams component containing images. Contains 5 child elements.

John & Mary Thompson

Owners

Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.

<div class="team-member">
 <div class="member-image">
  <img alt="John" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"/>
 </div>
 <h3 class="member-name">
  John & Mary Thompson
 </h3>
 <p class="member-role">
  Owners
 </p>
 <p class="member-bio">
  Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.
 </p>
</div>

.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Teams - Team Member

TEAMS html> comp-118

A teams component containing images. Contains 5 child elements.

Sarah Mitchell

Event Coordinator

With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.

<div class="team-member">
 <div class="member-image">
  <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400"/>
 </div>
 <h3 class="member-name">
  Sarah Mitchell
 </h3>
 <p class="member-role">
  Event Coordinator
 </p>
 <p class="member-bio">
  With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.
 </p>
</div>

.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Teams - Team Member

TEAMS html> comp-119

A teams component containing images. Contains 5 child elements.

Michael Rivers

Grounds Manager

Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.

<div class="team-member">
 <div class="member-image">
  <img alt="Michael" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400"/>
 </div>
 <h3 class="member-name">
  Michael Rivers
 </h3>
 <p class="member-role">
  Grounds Manager
 </p>
 <p class="member-bio">
  Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.
 </p>
</div>

.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Teams - Team Member

TEAMS html> comp-120

A teams component containing images. Contains 5 child elements.

Emily Chen

Guest Relations

Your first point of contact, Emily helps couples envision and plan their perfect day.

<div class="team-member">
 <div class="member-image">
  <img alt="Emily" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"/>
 </div>
 <h3 class="member-name">
  Emily Chen
 </h3>
 <p class="member-role">
  Guest Relations
 </p>
 <p class="member-bio">
  Your first point of contact, Emily helps couples envision and plan their perfect day.
 </p>
</div>

.member-image img {
            transform: scale(1.1);
        }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.member-name {
            color: white;
        }
.team-member {
            text-align: center;
            position: relative;
        }

Maps - Map Container

MAPS html> comp-126

A maps component. Contains 32 child elements.

Find Your Way to Forever

Address

12500 Rum River Drive
Princeton, MN 55371

<div class="map-container">
 <div class="map-info">
  <h2>
   Find Your Way to Forever
  </h2>
  <div class="location-details">
   <div class="location-item">
    <div class="location-icon">
     📍
    </div>
    <div class="location-text">
     <h4>
      Address
     </h4>
     <p>
      12500 Rum River Drive
      <br/>
      Princeton, MN 55371
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     🚗
    </div>
    <div class="location-text">
     <h4>
      Easy Access From
     </h4>
     <p>
      45 min from Minneapolis
      <br/>
      30 min from St. Cloud
      <br/>
      1 hour from Brainerd
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     ✈️
    </div>
    <div class="location-text">
     <h4>
      Nearest Airport
     </h4>
     <p>
      Minneapolis-St. Paul International
      <br/>
      55 miles (1 hour drive)
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     🏨
    </div>
    <div class="location-text">
     <h4>
      Accommodations
     </h4>
     <p>
      Partner hotels in Princeton & Milaca
      <br/>
      Group rates available
     </p>
    </div>
   </div>
  </div>
 </div>
 <div class="map-embed">
  <div class="map-placeholder">
   <p>
    Interactive Map
   </p>
   <p style="font-size: 16px; margin-top: 10px;">
    Click to view on Google Maps
   </p>
  </div>
 </div>
</div>

.location-details {
            margin-bottom: 40px;
        }
.map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.map-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.map-info {
                padding: 40px 20px;
            }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.map-info {
            padding: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.map-embed {
            background: var(--deep-brown);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }
.map-info h2 {
            font-size: 42px;
            color: var(--deep-brown);
            margin-bottom: 30px;
        }
.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.map-embed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
        }

Maps - Map Info

MAPS html> comp-127

A maps component. Contains 27 child elements.

Find Your Way to Forever

Address

12500 Rum River Drive
Princeton, MN 55371

Easy Access From

45 m...

<div class="map-info">
 <h2>
  Find Your Way to Forever
 </h2>
 <div class="location-details">
  <div class="location-item">
   <div class="location-icon">
    📍
   </div>
   <div class="location-text">
    <h4>
     Address
    </h4>
    <p>
     12500 Rum River Drive
     <br/>
     Princeton, MN 55371
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    🚗
   </div>
   <div class="location-text">
    <h4>
     Easy Access From
    </h4>
    <p>
     45 min from Minneapolis
     <br/>
     30 min from St. Cloud
     <br/>
     1 hour from Brainerd
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    ✈️
   </div>
   <div class="location-text">
    <h4>
     Nearest Airport
    </h4>
    <p>
     Minneapolis-St. Paul International
     <br/>
     55 miles (1 hour drive)
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    🏨
   </div>
   <div class="location-text">
    <h4>
     Accommodations
    </h4>
    <p>
     Partner hotels in Princeton & Milaca
     <br/>
     Group rates available
    </p>
   </div>
  </div>
 </div>
</div>

.location-details {
            margin-bottom: 40px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.map-info {
                padding: 40px 20px;
            }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.map-info {
            padding: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.map-info h2 {
            font-size: 42px;
            color: var(--deep-brown);
            margin-bottom: 30px;
        }

Maps - Map Embed

MAPS html> comp-128

A maps component. Contains 3 child elements.

Interactive Map

Click to view on Google Maps

<div class="map-embed">
 <div class="map-placeholder">
  <p>
   Interactive Map
  </p>
  <p style="font-size: 16px; margin-top: 10px;">
   Click to view on Google Maps
  </p>
 </div>
</div>

.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }
.map-embed::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
        }
.map-embed {
            background: var(--deep-brown);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }

Maps - Map Placeholder

MAPS html> comp-129

A maps component. Contains 2 child elements.

Interactive Map

Click to view on Google Maps

<div class="map-placeholder">
 <p>
  Interactive Map
 </p>
 <p style="font-size: 16px; margin-top: 10px;">
  Click to view on Google Maps
 </p>
</div>

.map-placeholder {
            position: relative;
            z-index: 1;
            text-align: center;
        }

Maps - Location Details

MAPS html> comp-130

A maps component. Contains 25 child elements.

Address

12500 Rum River Drive
Princeton, MN 55371

Easy Access From

45 min from Minneapolis
30 min from St. Cloud
1 hour from Brainer...

<div class="location-details">
 <div class="location-item">
  <div class="location-icon">
   📍
  </div>
  <div class="location-text">
   <h4>
    Address
   </h4>
   <p>
    12500 Rum River Drive
    <br/>
    Princeton, MN 55371
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   🚗
  </div>
  <div class="location-text">
   <h4>
    Easy Access From
   </h4>
   <p>
    45 min from Minneapolis
    <br/>
    30 min from St. Cloud
    <br/>
    1 hour from Brainerd
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   ✈️
  </div>
  <div class="location-text">
   <h4>
    Nearest Airport
   </h4>
   <p>
    Minneapolis-St. Paul International
    <br/>
    55 miles (1 hour drive)
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   🏨
  </div>
  <div class="location-text">
   <h4>
    Accommodations
   </h4>
   <p>
    Partner hotels in Princeton & Milaca
    <br/>
    Group rates available
   </p>
  </div>
 </div>
</div>

.location-details {
            margin-bottom: 40px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }
.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }

Maps - Location Item

MAPS html> comp-131

A maps component. Contains 5 child elements.

Address

12500 Rum River Drive
Princeton, MN 55371

<div class="location-item">
 <div class="location-icon">
  📍
 </div>
 <div class="location-text">
  <h4>
   Address
  </h4>
  <p>
   12500 Rum River Drive
   <br/>
   Princeton, MN 55371
  </p>
 </div>
</div>

.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-132

A maps component. Contains 3 child elements.

Address

12500 Rum River Drive
Princeton, MN 55371

<div class="location-text">
 <h4>
  Address
 </h4>
 <p>
  12500 Rum River Drive
  <br/>
  Princeton, MN 55371
 </p>
</div>

.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Maps - Location Item

MAPS html> comp-133

A maps component. Contains 6 child elements.

Easy Access From

45 min from Minneapolis
30 min from St. Cloud
1 hour from Brainerd

<div class="location-item">
 <div class="location-icon">
  🚗
 </div>
 <div class="location-text">
  <h4>
   Easy Access From
  </h4>
  <p>
   45 min from Minneapolis
   <br/>
   30 min from St. Cloud
   <br/>
   1 hour from Brainerd
  </p>
 </div>
</div>

.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-134

A maps component. Contains 4 child elements.

Easy Access From

45 min from Minneapolis
30 min from St. Cloud
1 hour from Brainerd

<div class="location-text">
 <h4>
  Easy Access From
 </h4>
 <p>
  45 min from Minneapolis
  <br/>
  30 min from St. Cloud
  <br/>
  1 hour from Brainerd
 </p>
</div>

.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Maps - Location Item

MAPS html> comp-135

A maps component. Contains 5 child elements.

✈️

Nearest Airport

Minneapolis-St. Paul International
55 miles (1 hour drive)

<div class="location-item">
 <div class="location-icon">
  ✈️
 </div>
 <div class="location-text">
  <h4>
   Nearest Airport
  </h4>
  <p>
   Minneapolis-St. Paul International
   <br/>
   55 miles (1 hour drive)
  </p>
 </div>
</div>

.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-136

A maps component. Contains 3 child elements.

Nearest Airport

Minneapolis-St. Paul International
55 miles (1 hour drive)

<div class="location-text">
 <h4>
  Nearest Airport
 </h4>
 <p>
  Minneapolis-St. Paul International
  <br/>
  55 miles (1 hour drive)
 </p>
</div>

.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Maps - Location Item

MAPS html> comp-137

A maps component. Contains 5 child elements.

🏨

Accommodations

Partner hotels in Princeton & Milaca
Group rates available

<div class="location-item">
 <div class="location-icon">
  🏨
 </div>
 <div class="location-text">
  <h4>
   Accommodations
  </h4>
  <p>
   Partner hotels in Princeton & Milaca
   <br/>
   Group rates available
  </p>
 </div>
</div>

.location-item {
            display: flex;
            align-items: start;
            margin-bottom: 25px;
            color: var(--text-dark);
        }
.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }
.location-icon {
            width: 40px;
            height: 40px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 20px;
            flex-shrink: 0;
        }

Maps - Location Text

MAPS html> comp-138

A maps component. Contains 3 child elements.

Accommodations

Partner hotels in Princeton & Milaca
Group rates available

<div class="location-text">
 <h4>
  Accommodations
 </h4>
 <p>
  Partner hotels in Princeton & Milaca
  <br/>
  Group rates available
 </p>
</div>

.location-text h4 {
            color: var(--deep-brown);
            margin-bottom: 5px;
            font-size: 18px;
        }
.location-text p {
            color: var(--text-light);
            line-height: 1.6;
        }

Social Logos

SOCIAL html> comp-141

A social component. Contains 4 child elements.

<div class="social-logos">
 <span class="social-logo">
  The Knot
 </span>
 <span class="social-logo">
  WeddingWire
 </span>
 <span class="social-logo">
  Martha Stewart
 </span>
 <span class="social-logo">
  Minnesota Bride
 </span>
</div>

.social-logo {
            color: white;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
.social-logos {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            opacity: 0.6;
        }

Social Text

SOCIAL html> comp-142

A social component. Contains 2 child elements.

<p class="social-text">
 "Rum River Barn isn't just a venue—it's
 <span class="highlight">
  where dreams come to life
 </span>
 . 
                Their commitment to saying 'yes' to every couple's vision sets them apart as
 <span class="highlight">
  Minnesota's most accommodating wedding destination
 </span>
 ."
</p>

.highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-text .highlight {
            color: var(--accent-gold);
            font-style: italic;
        }
.social-text {
            font-size: 32px;
            color: white;
            max-width: 900px;
            margin: 0 auto;
            line-height: 1.4;
        }

Blogs - Blog Meta

BLOGS html> comp-150

A blogs component. Contains 2 child elements.

<div class="blog-meta">
 <span>
  October 15, 2024
 </span>
 <span>
  5 min read
 </span>
</div>

October 10, 2024 3 min read

.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }

Blogs - Blog Meta

BLOGS html> comp-153

A blogs component. Contains 2 child elements.

<div class="blog-meta">
 <span>
  October 10, 2024
 </span>
 <span>
  3 min read
 </span>
</div>

October 5, 2024 4 min read

.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }

Blogs - Blog Meta

BLOGS html> comp-156

A blogs component. Contains 2 child elements.

<div class="blog-meta">
 <span>
  October 5, 2024
 </span>
 <span>
  4 min read
 </span>
</div>

Minnesota's Premier Venue

.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }

Heroes - Offset Hero

HEROES html> comp-167

A heroes component containing images, buttons, links. Contains 20 child elements.

Where Rustic Charm Meets Modern Elegance

Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.

<section class="offset-hero">
 <div class="container">
  <div class="offset-hero-content">
   <div class="offset-text">
    <span class="badge">
     Minnesota's Premier Venue
    </span>
    <h2>
     Where Rustic Charm Meets Modern Elegance
    </h2>
    <p>
     Create unforgettable memories in our beautifully restored barn, surrounded by 400 acres of Minnesota's natural splendor. From intimate gatherings to grand celebrations, your vision becomes reality here.
    </p>
    <div class="btn-group">
     <a class="btn-outline" href="#">
      View Gallery
     </a>
     <a class="btn-outline" href="#">
      Check Availability
     </a>
    </div>
   </div>
   <div class="offset-images">
    <div class="offset-main-img">
     <img alt="Wedding ceremony" src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800"/>
    </div>
    <div class="offset-accent-img">
     <img alt="Wedding details" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    </div>
    <div class="floating-card">
     <h4>
      2025 Dates
     </h4>
     <p>
      Limited availability for peak season
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Subtle Wave Divider Bottom -->
 <div class="shape-divider bottom subtle-wave">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="#2C2416">
   </path>
  </svg>
 </div>
</section>

.shape-divider.split svg {
                height: 40px;
            }
.offset-main-img {
            position: absolute;
            top: 0;
            right: 0;
            width: 85%;
            height: 85%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.offset-hero {
            padding: 120px 0 140px;
            background: linear-gradient(135deg, var(--soft-white) 0%, var(--warm-cream) 100%);
            position: relative;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.shape-divider { 
            display: none !important; 
        }
.offset-hero-content,
            .block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.offset-accent-img {
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 45%;
            height: 45%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border: 8px solid var(--soft-white);
        }
.offset-text p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 40px;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.offset-hero-content {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
        }
.offset-accent-img {
                display: none;
            }
.offset-accent-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.btn-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
.offset-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.offset-images {
                height: 400px;
                margin-top: 40px;
            }
.offset-text {
            z-index: 2;
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.floating-card {
            position: absolute;
            top: 20px;
            left: 20px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            max-width: 200px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.floating-card h4 {
            color: var(--deep-brown);
            font-size: 20px;
            margin-bottom: 8px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.offset-text .badge {
            display: inline-block;
            background: var(--accent-gold);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: fadeInUp 0.8s ease;
        }
.floating-card p {
            color: var(--text-light);
            font-size: 14px;
        }
.shape-divider svg {
                height: 20px;
            }
.offset-images {
            position: relative;
            height: 600px;
        }
.offset-text h2 {
            font-size: 54px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }

Heroes - Venue Showcase Section Shape Top Shape So

HEROES html> comp-169

A heroes component containing images, buttons. Contains 31 child elements.

Explore Our Spaces

Every corner tells a story, every space creates memories

<section class="venue-showcase section-shape-top shape--soft-curve">
 <div class="container venue-content">
  <div class="venue-header">
   <h2>
    Explore Our Spaces
   </h2>
   <p>
    Every corner tells a story, every space creates memories
   </p>
  </div>
  <div class="venue-tabs">
   <button class="venue-tab active">
    The Barn
   </button>
   <button class="venue-tab">
    Bridal Suite
   </button>
   <button class="venue-tab">
    Groom's Quarters
   </button>
   <button class="venue-tab">
    Garden Pavilion
   </button>
  </div>
  <div class="venue-display">
   <div class="venue-main-image">
    <img alt="Barn interior" src="https://images.unsplash.com/photo-1564069114553-7215e1ff1890?w=800"/>
   </div>
   <div class="venue-details">
    <h3>
     The Historic Barn
    </h3>
    <p>
     Our crown jewel, this beautifully restored barn features soaring ceilings, original timber beams, and modern amenities seamlessly integrated into its historic charm.
    </p>
    <div class="venue-features">
     <div class="venue-feature">
      <h5>
       Capacity
      </h5>
      <p>
       Up to 300 guests
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Features
      </h5>
      <p>
       Built-in bar & dance floor
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Lighting
      </h5>
      <p>
       Edison bulbs & chandeliers
      </p>
     </div>
     <div class="venue-feature">
      <h5>
       Climate
      </h5>
      <p>
       Heated & air conditioned
      </p>
     </div>
    </div>
   </div>
  </div>
 </div>
 <!-- Split Divider Bottom -->
 <div class="shape-divider bottom split">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,0 L0,40 L600,70 L1200,40 L1200,0 L1200,120 L0,120 Z" fill="#FEFDFB">
   </path>
  </svg>
 </div>
</section>

.shape-divider.split svg {
                height: 40px;
            }
.venue-tabs {
                flex-direction: column;
                align-items: center;
            }
.venue-feature {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 15px;
            border: 1px solid rgba(212, 165, 116, 0.2);
            backdrop-filter: blur(10px);
        }
.venue-tab {
            padding: 15px 35px;
            background: transparent;
            border: 2px solid var(--accent-gold);
            color: var(--accent-gold);
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.venue-showcase::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(212, 165, 116, 0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
        }
.venue-display {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 60px;
            align-items: center;
        }
.venue-header {
            text-align: center;
            margin-bottom: 80px;
        }
.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.container {
                padding: 0 20px;
            }
.shape-divider { 
            display: none !important; 
        }
.venue-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.venue-tab.active,
        .venue-tab:hover {
            background: var(--accent-gold);
            color: white;
        }
.venue-main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.venue-feature h5 {
            color: var(--accent-gold);
            margin-bottom: 8px;
            font-size: 16px;
        }
.shape--soft-curve { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q600,0 1200,60 L1200,120 L0,120 Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.venue-showcase {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--deep-brown) 0%, var(--dark-bg) 100%);
            position: relative;
            overflow: hidden;
        }
.venue-content {
            position: relative;
            z-index: 1;
        }
.section-shape-top { 
            position: relative; 
        }
.split svg {
                height: 40px;
            }
.venue-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.venue-header p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
.venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.venue-details p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }
.venue-details {
            color: white;
        }
.venue-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
.shape-divider svg {
                height: 20px;
            }
.venue-feature p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
        }
.venue-main-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
        }
.venue-details h3 {
            font-size: 36px;
            margin-bottom: 25px;
            color: var(--accent-gold);
        }

Galleries - Instagram Section Section Shape Top Sh

GALLERIES html> comp-173

A galleries component containing images, links. Contains 44 child elements.

Follow Our Journey

@rumriverbarn

<section class="instagram-section section-shape-top shape--angle">
 <!-- Simple Angle Top -->
 <div class="shape-divider top angle">
  <svg preserveaspectratio="none" style="transform: rotate(180deg)" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 0L1200 120h-1200z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
 <div class="container">
  <div class="instagram-header">
   <h2>
    Follow Our Journey
   </h2>
   <a class="instagram-handle" href="#">
    @rumriverbarn
   </a>
  </div>
  <div class="instagram-grid">
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,247
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       892
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       2,103
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       1,567
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       934
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
   <div class="instagram-post">
    <img alt="Instagram post" src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?w=400"/>
    <div class="instagram-overlay">
     <div class="instagram-stats">
      <span class="count">
       3,421
      </span>
      <span>
       Likes
      </span>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>

.shape-divider.split svg {
                height: 40px;
            }
.instagram-handle {
            color: var(--accent-gold);
            font-size: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
.instagram-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.instagram-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(44, 36, 22, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
.instagram-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
.instagram-post:hover .instagram-overlay {
            opacity: 1;
        }
.instagram-stats span {
            display: block;
            margin: 10px;
            font-size: 16px;
        }
.instagram-stats {
            text-align: center;
            color: white;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.container {
                padding: 0 20px;
            }
.instagram-overlay {
            opacity: 1;
        }
.instagram-header {
            text-align: center;
            margin-bottom: 60px;
        }
.shape-divider { 
            display: none !important; 
        }
.count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }
.instagram-post:hover img {
            transform: scale(1.1);
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.instagram-grid {
                grid-template-columns: 1fr;
            }
.instagram-post img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.section-shape-top { 
            position: relative; 
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.instagram-post {
            position: relative;
            padding-bottom: 100%;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
        }
.instagram-section {
            padding: 120px 0;
            background: var(--warm-cream);
            position: relative;
        }
.instagram-handle:hover {
            color: var(--primary-brown);
        }
.shape-divider svg {
                height: 20px;
            }
.instagram-stats .count {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-gold);
        }

Cards - Services Reveal Section Shape Top Shape An

CARDS html> comp-187

A cards component containing images. Contains 26 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations, we're here for all of life's milestones

<section class="services-reveal section-shape-top shape--angle">
 <div class="container">
  <div class="services-header">
   <h2>
    Celebrate Every Moment
   </h2>
   <p class="subtitle">
    From intimate gatherings to grand celebrations, we're here for all of life's milestones
   </p>
  </div>
  <div class="services-cards">
   <div class="service-card">
    <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $5,000
     </span>
     <h3 class="service-title">
      Weddings
     </h3>
     <p class="service-description">
      Your perfect day deserves the perfect setting. Full venue access, customizable packages, and our signature "yes" to all your dreams.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Corporate Event" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $2,000
     </span>
     <h3 class="service-title">
      Corporate Events
     </h3>
     <p class="service-description">
      Inspire your team in a setting that sparks creativity. Perfect for retreats, celebrations, and memorable company gatherings.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Special Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $1,500
     </span>
     <h3 class="service-title">
      Celebrations
     </h3>
     <p class="service-description">
      Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue. Flexible spaces for parties of all sizes.
     </p>
    </div>
   </div>
  </div>
 </div>
 <!-- Soft Curve Divider Bottom -->
 <div class="shape-divider bottom soft-curve">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,60 Q600,0 1200,60 L1200,120 L0,120 Z" fill="#4A3426">
   </path>
  </svg>
 </div>
</section>

.service-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
.shape-divider.split svg {
                height: 40px;
            }
.service-card:hover .service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.services-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: relative;
            z-index: 1;
        }
.service-card {
            position: relative;
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.soft-curve svg {
                height: 30px;
            }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.services-header .subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.service-title {
            transform: translateY(-10px);
        }
.service-bg {
            transform: scale(1.1);
        }
.service-overlay {
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
        }
.service-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            transition: background 0.4s ease;
        }
.container {
                padding: 0 20px;
            }
.subtitle {
            font-size: 20px;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }
.shape-divider { 
            display: none !important; 
        }
.service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-card:hover .service-description {
            opacity: 1;
            transform: translateY(0);
        }
.service-card:hover .service-title {
            transform: translateY(-10px);
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.section-shape-top { 
            position: relative; 
        }
.services-reveal {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.services-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }
.service-card:hover .service-bg {
            transform: scale(1.1);
        }
.service-price {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
.service-title {
            font-size: 32px;
            color: white;
            margin-bottom: 15px;
            transform: translateY(0);
            transition: transform 0.4s ease;
        }
.services-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.shape-divider svg {
                height: 20px;
            }
.services-cards,
            .team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.services-reveal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(139, 99, 55, 0.05)"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>');
            opacity: 0.5;
        }

Sections - Alternating Blocks Section Shape Top Sh

SECTIONS html> comp-211

A sections component containing images, buttons, links. Contains 46 child elements.

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.

Climate-...

<section class="alternating-blocks section-shape-top shape--subtle-wave">
 <div class="container">
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     01
    </div>
    <h3>
     The Historic Barn
    </h3>
    <p>
     Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities, creating the perfect backdrop for your celebration.
    </p>
    <ul class="feature-list">
     <li>
      Climate-controlled comfort year-round
     </li>
     <li>
      Original exposed beam architecture
     </li>
     <li>
      Capacity for up to 300 guests
     </li>
     <li>
      State-of-the-art lighting system
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Explore The Barn
    </a>
   </div>
   <div class="block-image">
    <img alt="Historic barn interior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
    <span class="image-badge">
     100+ Years
    </span>
   </div>
  </div>
  <div class="block-item reverse">
   <div class="block-content">
    <div class="number">
     02
    </div>
    <h3>
     Vineyard Ceremonies
    </h3>
    <p>
     Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites, each with its own unique charm and breathtaking views.
    </p>
    <ul class="feature-list">
     <li>
      Sunset ceremony perfection
     </li>
     <li>
      Natural amphitheater setting
     </li>
     <li>
      Rain backup in covered pavilion
     </li>
     <li>
      Complimentary wine tasting for couples
     </li>
    </ul>
    <a class="btn-outline" href="#">
     View Ceremony Sites
    </a>
   </div>
   <div class="block-image">
    <img alt="Vineyard ceremony site" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
    <span class="image-badge">
     5 Locations
    </span>
   </div>
  </div>
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     03
    </div>
    <h3>
     Enchanted Forest
    </h3>
    <p>
     Wander through our mile-long paths beneath ancient oaks and whispering pines. The forest provides endless opportunities for stunning photography and intimate moments.
    </p>
    <ul class="feature-list">
     <li>
      Professional trail lighting available
     </li>
     <li>
      Hidden clearings for portraits
     </li>
     <li>
      Seasonal wildflower meadows
     </li>
     <li>
      Private couple's photography hour
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Discover The Grounds
    </a>
   </div>
   <div class="block-image">
    <img alt="Forest wedding photos" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
    <span class="image-badge">
     400 Acres
    </span>
   </div>
  </div>
 </div>
 <!-- Angle Divider Bottom -->
 <div class="shape-divider bottom angle">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M1200 0L0 120h1200z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
</section>

.shape-divider.split svg {
                height: 40px;
            }
.block-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            margin-bottom: 120px;
        }
.block-content h3 {
            font-size: 42px;
            margin-bottom: 25px;
        }
.block-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
.feature-list li {
            padding: 12px 0;
            position: relative;
            padding-left: 30px;
        }
.number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 18px;
        }
.image-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wine);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse .block-content {
            direction: ltr;
        }
.block-content {
            direction: ltr;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.block-item:last-child {
            margin-bottom: 0;
        }
.alternating-blocks .btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.block-item.reverse {
            direction: rtl;
        }
.alternating-blocks p,
        .alternating-blocks .feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.reverse {
            direction: rtl;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.container {
                padding: 0 20px;
            }
.block-item,
            .venue-display,
            .map-container {
                grid-template-columns: 1fr;
                gap: 40px;
            }
.reverse {
                direction: ltr;
            }
.shape-divider { 
            display: none !important; 
        }
.reverse .block-content {
            direction: ltr;
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.block-content {
            padding: 40px;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.block-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        }
.block-item.reverse {
                direction: ltr;
            }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.feature-list li {
            color: rgba(255, 255, 255, 0.8);
        }
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.alternating-blocks .btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.feature-list {
            list-style: none;
            margin-bottom: 30px;
        }
.alternating-blocks {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-bg) 0%, var(--medium-bg) 100%);
            position: relative;
        }
.block-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.number {
            color: white;
        }
.shape--subtle-wave { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.shape-divider svg {
                height: 20px;
            }
.block-content .number {
            font-size: 80px;
            color: var(--accent-gold);
            opacity: 0.5;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 20px;
        }
.alternating-blocks h3,
        .alternating-blocks .number {
            color: white;
        }

Sections - Team Section Section Shape Top Shape Su

SECTIONS html> comp-215

A sections component containing images. Contains 32 child elements.

Meet Your Hosts

The Family Behind the Farm

John & Mary Thompson

<section class="team-section section-shape-top shape--subtle-wave">
 <div class="container">
  <div class="team-header">
   <p class="script-font">
    Meet Your Hosts
   </p>
   <h2>
    The Family Behind the Farm
   </h2>
  </div>
  <div class="team-carousel">
   <div class="team-member">
    <div class="member-image">
     <img alt="John" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"/>
    </div>
    <h3 class="member-name">
     John & Mary Thompson
    </h3>
    <p class="member-role">
     Owners
    </p>
    <p class="member-bio">
     Fourth-generation farmers who transformed their family property into Minnesota's most sought-after wedding venue.
    </p>
   </div>
   <div class="team-member">
    <div class="member-image">
     <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400"/>
    </div>
    <h3 class="member-name">
     Sarah Mitchell
    </h3>
    <p class="member-role">
     Event Coordinator
    </p>
    <p class="member-bio">
     With 15 years of experience, Sarah ensures every detail of your special day runs flawlessly.
    </p>
   </div>
   <div class="team-member">
    <div class="member-image">
     <img alt="Michael" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400"/>
    </div>
    <h3 class="member-name">
     Michael Rivers
    </h3>
    <p class="member-role">
     Grounds Manager
    </p>
    <p class="member-bio">
     Maintains our 400 acres to perfection, creating stunning backdrops for your celebration.
    </p>
   </div>
   <div class="team-member">
    <div class="member-image">
     <img alt="Emily" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"/>
    </div>
    <h3 class="member-name">
     Emily Chen
    </h3>
    <p class="member-role">
     Guest Relations
    </p>
    <p class="member-bio">
     Your first point of contact, Emily helps couples envision and plan their perfect day.
    </p>
   </div>
  </div>
 </div>
 <!-- Angle Divider Bottom Inverted -->
 <div class="shape-divider bottom angle">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 0L1200 120h-1200z" fill="white">
   </path>
  </svg>
 </div>
</section>

.shape-divider.split svg {
                height: 40px;
            }
.team-member:hover .member-image img {
            transform: scale(1.1);
        }
.member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.member-name {
            font-size: 26px;
            margin-bottom: 8px;
        }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.team-carousel,
            .blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.team-section .member-bio {
            color: rgba(255, 255, 255, 0.8);
        }
.team-header h2,
        .team-section .member-name {
            color: white;
        }
.team-header h2 {
            font-size: 48px;
            margin-bottom: 20px;
        }
.container {
                padding: 0 20px;
            }
.shape-divider { 
            display: none !important; 
        }
.team-member {
            text-align: center;
            position: relative;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.member-image {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 30px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
            border: 4px solid var(--accent-gold);
        }
.team-header .script-font {
            font-size: 28px;
            margin-bottom: 15px;
        }
.section-shape-top { 
            position: relative; 
        }
.member-bio {
            line-height: 1.6;
            max-width: 300px;
            margin: 0 auto;
        }
.member-name {
            color: white;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.team-section {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--wine) 0%, var(--deep-brown) 100%);
            position: relative;
        }
.team-section .team-header h2,
        .team-section .member-name {
            color: white;
        }
.member-image img {
            transform: scale(1.1);
        }
.team-header .script-font {
            color: var(--accent-gold);
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.team-carousel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
.shape--subtle-wave { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,0V40c240,20,480,20,720,0s480-20,480,0v80H0Z" fill="white"/></svg>'); 
            --shape-h: 40px;
        }
.shape-divider svg {
                height: 20px;
            }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.member-role {
            font-size: 16px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.team-section .team-header .script-font {
            color: var(--accent-gold);
        }
.script-font {
            color: var(--accent-gold);
        }
.team-header {
            text-align: center;
            margin-bottom: 80px;
        }

Sections - Blog Section Section Shape Top Shape An

SECTIONS html> comp-216

A sections component containing images, buttons, links. Contains 43 child elements.

Stories from the Barn

Wedding inspiration, planning tips, and real celebrations

View All Posts

<section class="blog-section section-shape-top shape--angle">
 <div class="container">
  <div class="blog-header">
   <div class="blog-header-text">
    <h2>
     Stories from the Barn
    </h2>
    <p>
     Wedding inspiration, planning tips, and real celebrations
    </p>
   </div>
   <a class="btn-outline" href="#">
    View All Posts
   </a>
  </div>
  <div class="blog-grid">
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
     <span class="blog-category">
      Real Weddings
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 15, 2024
      </span>
      <span>
       5 min read
      </span>
     </div>
     <h3 class="blog-title">
      A Magical Fall Wedding: Sarah & Tom's Story
     </h3>
     <p class="blog-excerpt">
      When the autumn leaves created a natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic...
     </p>
     <a class="read-more" href="#">
      Read Story
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Wedding planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
     <span class="blog-category">
      Planning Tips
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 10, 2024
      </span>
      <span>
       3 min read
      </span>
     </div>
     <h3 class="blog-title">
      10 Ways to Personalize Your Barn Wedding
     </h3>
     <p class="blog-excerpt">
      From custom signage to family heirlooms, discover creative ways to make your barn wedding uniquely yours...
     </p>
     <a class="read-more" href="#">
      Read More
     </a>
    </div>
   </article>
   <article class="blog-card">
    <div class="blog-image">
     <img alt="Seasonal guide" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=600"/>
     <span class="blog-category">
      Seasonal Guide
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 5, 2024
      </span>
      <span>
       4 min read
      </span>
     </div>
     <h3 class="blog-title">
      Why Minnesota Summers Make Perfect Weddings
     </h3>
     <p class="blog-excerpt">
      Long golden hours, warm breezes through the vineyard, and starlit receptions—summer at Rum River is unforgettable...
     </p>
     <a class="read-more" href="#">
      Read Guide
     </a>
    </div>
   </article>
  </div>
 </div>
 <!-- Soft Curve Bottom to Sage -->
 <div class="shape-divider bottom soft-curve">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,40 Q600,80 1200,40 L1200,120 L0,120 Z" fill="#7A8B7F">
   </path>
  </svg>
 </div>
</section>

.shape-divider.split svg {
                height: 40px;
            }
.blog-card:hover .blog-image img {
            transform: scale(1.1);
        }
.blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--accent-gold);
            color: white;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.soft-curve svg {
                height: 30px;
            }
.shape-divider.soft-curve svg {
                height: 30px;
            }
.shape--angle { 
            --shape-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M1200 0L0 120H1200Z" fill="white"/></svg>'); 
            --shape-h: 50px;
        }
.blog-header-text p {
            color: var(--text-light);
            font-size: 18px;
        }
.blog-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-light);
        }
.blog-grid,
            .instagram-grid {
                grid-template-columns: 1fr;
            }
.btn-outline {
            padding: 15px 35px;
            border: 2px solid var(--primary-brown);
            color: var(--primary-brown);
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.read-more:hover::after {
            transform: translateX(5px);
        }
.blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.btn-outline-light {
            border-color: white;
            color: white;
        }
.blog-content {
            padding: 35px;
        }
.container {
                padding: 0 20px;
            }
.blog-image img {
            transform: scale(1.1);
        }
.shape-divider { 
            display: none !important; 
        }
.read-more:hover {
            color: var(--primary-brown);
        }
.btn-outline:hover {
            background: var(--accent-gold);
            color: white;
        }
.read-more {
            color: var(--accent-gold);
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: all 0.3s ease;
        }
.blog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            flex-wrap: wrap;
            gap: 30px;
        }
.section-shape-top::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: var(--shape-h, 60px);
            top: calc(-1 * var(--shape-h, 60px));
            background: inherit;
            -webkit-mask: var(--shape-mask) center / 100% 100% no-repeat;
            mask: var(--shape-mask) center / 100% 100% no-repeat;
            transform: translateY(1px);
            pointer-events: none;
            z-index: 1;
        }
.read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
            display: inline-block;
        }
.btn-outline-light:hover {
            background: white;
            color: var(--deep-brown);
        }
.blog-section {
            padding: 120px 0;
            background: white;
            position: relative;
        }
.blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }
.section-shape-top { 
            position: relative; 
        }
.btn-outline:hover {
            background: var(--primary-brown);
            color: white;
            transform: translateY(-2px);
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.blog-title {
            font-size: 24px;
            color: var(--deep-brown);
            margin-bottom: 15px;
            line-height: 1.3;
        }
.blog-excerpt {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 25px;
        }
.blog-card {
            background: var(--warm-cream);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
.blog-header-text h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 10px;
        }
.btn-outline {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }
.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
.shape-divider svg {
                height: 20px;
            }
.blog-header {
                flex-direction: column;
                align-items: flex-start;
            }
.blog-image {
            height: 250px;
            overflow: hidden;
            position: relative;
        }

Headers - Nav Container

HEADERS html> comp-313

A headers component containing links. Contains 12 child elements.

RUM RIVER

Home

About
Amenities
Gallery
Contact

<div class="nav-container">
 <div class="logo">
  RUM RIVER
 </div>
 <ul class="nav-links">
  <li>
   <a href="#home">
    Home
   </a>
  </li>
  <li>
   <a href="#about">
    About
   </a>
  </li>
  <li>
   <a href="#features">
    Amenities
   </a>
  </li>
  <li>
   <a href="#gallery">
    Gallery
   </a>
  </li>
  <li>
   <a href="#contact">
    Contact
   </a>
  </li>
 </ul>
</div>

.logo {
            font-size: 28px;
            color: var(--light);
            font-weight: bold;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: fadeIn 1s ease;
        }
.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }
.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }
.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
.nav-links a:hover::after {
            width: 100%;
        }
.nav-links { display: none; }
.nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

Headers - Nav Links

HEADERS html> comp-314

A headers component containing links. Contains 10 child elements.

Contact

...

HTML

<ul class="nav-links">
 <li>
  <a href="#home">
   Home
  </a>
 </li>
 <li>
  <a href="#about">
   About
  </a>
 </li>
 <li>
  <a href="#features">
   Amenities
  </a>
 </li>
 <li>
  <a href="#gallery">
   Gallery
  </a>
 </li>
 <li>
  <a href="#contact">
   Contact
  </a>
 </li>
</ul>

CSS

.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }
.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
.nav-links { display: none; }
.nav-links a:hover::after {
            width: 100%;
        }
.nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

Headers - Navbar

HEADERS html> comp-315

A headers component containing links. Contains 13 child elements.

...

HTML

<nav id="navbar">
 <div class="nav-container">
  <div class="logo">
   RUM RIVER
  </div>
  <ul class="nav-links">
   <li>
    <a href="#home">
     Home
    </a>
   </li>
   <li>
    <a href="#about">
     About
    </a>
   </li>
   <li>
    <a href="#features">
     Amenities
    </a>
   </li>
   <li>
    <a href="#gallery">
     Gallery
    </a>
   </li>
   <li>
    <a href="#contact">
     Contact
    </a>
   </li>
  </ul>
 </div>
</nav>

CSS

.logo {
            font-size: 28px;
            color: var(--light);
            font-weight: bold;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: fadeIn 1s ease;
        }
.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-size: 16px;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
        }
.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }
.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
.nav-links a:hover::after {
            width: 100%;
        }
.nav-links { display: none; }
.nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }

JavaScript

        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Observe elements
        document.querySelectorAll('.feature-card, .gallery-item').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s ease';
            observer.observe(el);
        });

        // Parallax effect
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const hero = document.querySelector('.hero::before');
            if (hero) {
                document.querySelector('.hero').style.transform = `translateY(${scrolled * 0.5}px)`;
            }
        });

Heroes - Home

HEROES html> comp-318

A heroes component containing links. Contains 6 child elements.

WELCOME TO

Rum River
Barn & Vineyard

Where Rustic Charm Meets Timeless Romance

START YOUR JOURNEY

...

HTML

<section class="hero" id="home">
 <div class="hero-content">
  <div class="hero-subtitle">
   WELCOME TO
  </div>
  <h1 class="hero-title">
   Rum River
   <br/>
   Barn & Vineyard
  </h1>
  <p class="hero-description">
   Where Rustic Charm Meets Timeless Romance
  </p>
  <a class="cta-button" href="#contact">
   START YOUR JOURNEY
  </a>
 </div>
</section>

CSS

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212,165,116,0.4);
        }
.hero-content::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            right: -40px;
            bottom: -40px;
            border: 1px solid rgba(212, 165, 116, 0.1);
            border-radius: 30px;
            animation: pulse 4s ease-in-out infinite 0.5s;
        }
.hero-title {
            font-size: 72px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
            letter-spacing: 3px;
            animation: slideUp 1.5s ease 0.3s both;
        }
.hero-subtitle {
            font-size: 18px;
            letter-spacing: 4px;
            margin-bottom: 20px;
            opacity: 0.9;
            animation: fadeIn 2s ease 0.5s both;
        }
.cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            color: var(--light);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
        }
.hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1410;
            overflow: hidden;
        }
.hero-content {
            text-align: center;
            color: var(--light);
            z-index: 10;
            position: relative;
            animation: slideUp 1.5s ease;
            padding: 40px;
            background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }
.hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><pattern id="vines" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M50,0 Q100,50 50,100 T50,200" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><circle cx="50" cy="50" r="3" fill="%23D4A574" opacity="0.3"/><circle cx="50" cy="150" r="3" fill="%23D4A574" opacity="0.3"/></pattern></defs><rect width="1920" height="1080" fill="url(%23vines)"/><path d="M0,800 Q480,700 960,800 T1920,800 L1920,1080 L0,1080 Z" fill="%232C1810" opacity="0.5"/></svg>');
            background-size: cover;
            animation: float 15s ease-in-out infinite;
        }
.hero-content::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px solid rgba(212, 165, 116, 0.3);
            border-radius: 25px;
            animation: pulse 4s ease-in-out infinite;
        }
.hero-title { font-size: 48px; }
.hero-description {
            font-size: 24px;
            font-style: italic;
            margin-bottom: 40px;
            opacity: 0.95;
            animation: fadeIn 2s ease 0.8s both;
        }
.hero-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
        }
.hero-image-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #2C1810 0%, #8B7355 50%, #D4A574 100%);
            opacity: 0.6;
            animation: slowZoom 20s ease-in-out infinite alternate;
        }

Heroes - Hero Content

HEROES html> comp-319

A heroes component containing links. Contains 5 child elements.

WELCOME TO

Rum River
Barn & Vineyard

Where Rustic Charm Meets Timeless Romance

START YOUR JOURNEY

...

HTML

<div class="hero-content">
 <div class="hero-subtitle">
  WELCOME TO
 </div>
 <h1 class="hero-title">
  Rum River
  <br/>
  Barn & Vineyard
 </h1>
 <p class="hero-description">
  Where Rustic Charm Meets Timeless Romance
 </p>
 <a class="cta-button" href="#contact">
  START YOUR JOURNEY
 </a>
</div>

CSS

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212,165,116,0.4);
        }
.hero-content::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            right: -40px;
            bottom: -40px;
            border: 1px solid rgba(212, 165, 116, 0.1);
            border-radius: 30px;
            animation: pulse 4s ease-in-out infinite 0.5s;
        }
.hero-title {
            font-size: 72px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
            letter-spacing: 3px;
            animation: slideUp 1.5s ease 0.3s both;
        }
.hero-subtitle {
            font-size: 18px;
            letter-spacing: 4px;
            margin-bottom: 20px;
            opacity: 0.9;
            animation: fadeIn 2s ease 0.5s both;
        }
.cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            color: var(--light);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
        }
.hero-content {
            text-align: center;
            color: var(--light);
            z-index: 10;
            position: relative;
            animation: slideUp 1.5s ease;
            padding: 40px;
            background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }
.hero-content::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px solid rgba(212, 165, 116, 0.3);
            border-radius: 25px;
            animation: pulse 4s ease-in-out infinite;
        }
.hero-title { font-size: 48px; }
.hero-description {
            font-size: 24px;
            font-style: italic;
            margin-bottom: 40px;
            opacity: 0.95;
            animation: fadeIn 2s ease 0.8s both;
        }

Galleries - About Grid

GALLERIES html> comp-320

A galleries component. Contains 9 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.

...

HTML

<div class="about-grid">
 <div class="about-content">
  <h2>
   Your
   <span class="accent-text">
    Perfect Day
   </span>
   <br/>
   Awaits
  </h2>
  <p>
   Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
  </p>
  <p>
   With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
  </p>
  <p>
   Every wedding here tells a unique story, and we're honored to be part of yours.
  </p>
 </div>
 <div class="about-image">
  <div class="image-placeholder">
  </div>
 </div>
</div>

CSS

.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.image-placeholder:hover {
            transform: scale(1.05) rotate(1deg);
        }
.image-placeholder::after {
            content: 'Rustic Barn Interior';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255,255,255,0.7);
            font-size: 24px;
            letter-spacing: 3px;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.about-grid, .features-grid { grid-template-columns: 1fr; }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }
.image-placeholder {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--sage) 0%, var(--primary) 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transition: transform 0.5s ease;
        }
.about-image {
            position: relative;
            animation: slideInRight 1s ease;
        }

Galleries - Features Grid

GALLERIES html> comp-321

A galleries component. Contains 24 child elements.

🏛️

Historic Barn

Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.

🍇

Vineyard Views

Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.

...

HTML

<div class="features-grid">
 <div class="feature-card">
  <div class="feature-icon">
   🏛️
  </div>
  <h3>
   Historic Barn
  </h3>
  <p>
   Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🍇
  </div>
  <h3>
   Vineyard Views
  </h3>
  <p>
   Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🌅
  </div>
  <h3>
   Outdoor Ceremony
  </h3>
  <p>
   Multiple outdoor ceremony locations including our garden pavilion and riverside grove.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   👰
  </div>
  <h3>
   Bridal Suite
  </h3>
  <p>
   Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🍽️
  </div>
  <h3>
   Catering Excellence
  </h3>
  <p>
   Full-service kitchen and partnerships with the region's finest caterers and culinary artists.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   📸
  </div>
  <h3>
   Photo Opportunities
  </h3>
  <p>
   Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.
  </p>
 </div>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
.features-grid { grid-template-columns: 1fr; }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Forms - Contact

FORMS html> comp-322

A forms component containing links. Contains 7 child elements.

Begin Your Love Story

Let us help you create the wedding of your dreams
at Rum River Barn & Vineyard

SCHEDULE A TOUR REQUEST PRICING

📍 123 River Valley Road, Countryside, MN 55555
📞 (555) 123-4567 | ✉️ weddings@rumriverbarn.com

...

HTML

<section class="contact" id="contact">
 <h2>
  Begin Your Love Story
 </h2>
 <p class="contact-info">
  Let us help you create the wedding of your dreams
  <br/>
  at Rum River Barn & Vineyard
 </p>
 <a class="contact-button" href="#">
  SCHEDULE A TOUR
 </a>
 <a class="contact-button" href="#">
  REQUEST PRICING
 </a>
 <p style="margin-top: 40px; opacity: 0.8;">
  📍 123 River Valley Road, Countryside, MN 55555
  <br/>
  📞 (555) 123-4567 | ✉️ weddings@rumriverbarn.com
 </p>
</section>

CSS

.contact-info {
            font-size: 20px;
            margin-bottom: 40px;
            opacity: 0.9;
        }
.contact-button {
            display: inline-block;
            padding: 15px 40px;
            background: var(--light);
            color: var(--dark);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            margin: 10px;
        }
.contact-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(255,255,255,0.3);
        }
.contact {
            padding: 100px 50px;
            background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
            color: var(--light);
            text-align: center;
        }
.contact h2 {
            font-size: 48px;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }

Cards - Feature Card

CARDS html> comp-324

A cards component. Contains 3 child elements.

🏛️

Historic Barn

Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.

...

HTML

<div class="feature-card">
 <div class="feature-icon">
  🏛️
 </div>
 <h3>
  Historic Barn
 </h3>
 <p>
  Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.
 </p>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-325

A cards component. Contains 3 child elements.

🍇

Vineyard Views

Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.

...

HTML

<div class="feature-card">
 <div class="feature-icon">
  🍇
 </div>
 <h3>
  Vineyard Views
 </h3>
 <p>
  Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.
 </p>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-326

A cards component. Contains 3 child elements.

🌅

Outdoor Ceremony

Multiple outdoor ceremony locations including our garden pavilion and riverside grove.

...

HTML

<div class="feature-card">
 <div class="feature-icon">
  🌅
 </div>
 <h3>
  Outdoor Ceremony
 </h3>
 <p>
  Multiple outdoor ceremony locations including our garden pavilion and riverside grove.
 </p>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-327

A cards component. Contains 3 child elements.

👰

Bridal Suite

Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.

...

HTML

<div class="feature-card">
 <div class="feature-icon">
  👰
 </div>
 <h3>
  Bridal Suite
 </h3>
 <p>
  Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.
 </p>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-328

A cards component. Contains 3 child elements.

🍽️

Catering Excellence

Full-service kitchen and partnerships with the region's finest caterers and culinary artists.

...

HTML

<div class="feature-card">
 <div class="feature-icon">
  🍽️
 </div>
 <h3>
  Catering Excellence
 </h3>
 <p>
  Full-service kitchen and partnerships with the region's finest caterers and culinary artists.
 </p>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Cards - Feature Card

CARDS html> comp-329

A cards component. Contains 3 child elements.

📸

Photo Opportunities

Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.

...

HTML

<div class="feature-card">
 <div class="feature-icon">
  📸
 </div>
 <h3>
  Photo Opportunities
 </h3>
 <p>
  Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.
 </p>
</div>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }

Sections - Section Container

SECTIONS html> comp-330

A sections component. Contains 10 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchant...

HTML

<div class="section-container">
 <div class="about-grid">
  <div class="about-content">
   <h2>
    Your
    <span class="accent-text">
     Perfect Day
    </span>
    <br/>
    Awaits
   </h2>
   <p>
    Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
   </p>
   <p>
    With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
   </p>
   <p>
    Every wedding here tells a unique story, and we're honored to be part of yours.
   </p>
  </div>
  <div class="about-image">
   <div class="image-placeholder">
   </div>
  </div>
 </div>
</div>

CSS

.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.image-placeholder:hover {
            transform: scale(1.05) rotate(1deg);
        }
.image-placeholder::after {
            content: 'Rustic Barn Interior';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255,255,255,0.7);
            font-size: 24px;
            letter-spacing: 3px;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.about-grid, .features-grid { grid-template-columns: 1fr; }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }
.image-placeholder {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--sage) 0%, var(--primary) 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transition: transform 0.5s ease;
        }
.about-image {
            position: relative;
            animation: slideInRight 1s ease;
        }
.section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

Sections - About

SECTIONS html> comp-332

A sections component. Contains 11 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset vie...

HTML

<section class="about" id="about">
 <div class="section-container">
  <div class="about-grid">
   <div class="about-content">
    <h2>
     Your
     <span class="accent-text">
      Perfect Day
     </span>
     <br/>
     Awaits
    </h2>
    <p>
     Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
    </p>
    <p>
     With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
    </p>
    <p>
     Every wedding here tells a unique story, and we're honored to be part of yours.
    </p>
   </div>
   <div class="about-image">
    <div class="image-placeholder">
    </div>
   </div>
  </div>
 </div>
</section>

CSS

.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.image-placeholder:hover {
            transform: scale(1.05) rotate(1deg);
        }
.image-placeholder::after {
            content: 'Rustic Barn Interior';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255,255,255,0.7);
            font-size: 24px;
            letter-spacing: 3px;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about {
            padding: 120px 50px;
            background: var(--light);
            position: relative;
        }
.about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }
.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.about-grid, .features-grid { grid-template-columns: 1fr; }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }
.image-placeholder {
            width: 100%;
            height: 500px;
            background: linear-gradient(135deg, var(--sage) 0%, var(--primary) 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transition: transform 0.5s ease;
        }
.about-image {
            position: relative;
            animation: slideInRight 1s ease;
        }
.section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

Sections - Features

SECTIONS html> comp-333

A sections component. Contains 27 child elements.

Exceptional Amenities

🏛️

Historic Barn

Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.

🍇

Vineyard V...

HTML

<section class="features" id="features">
 <h2>
  Exceptional
  <span class="accent-text">
   Amenities
  </span>
 </h2>
 <div class="features-grid">
  <div class="feature-card">
   <div class="feature-icon">
    🏛️
   </div>
   <h3>
    Historic Barn
   </h3>
   <p>
    Our beautifully restored 1890s barn accommodates up to 250 guests with original timber beams and modern amenities.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    🍇
   </div>
   <h3>
    Vineyard Views
   </h3>
   <p>
    Exchange vows surrounded by rolling vineyards and enjoy locally produced wines from our own harvest.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    🌅
   </div>
   <h3>
    Outdoor Ceremony
   </h3>
   <p>
    Multiple outdoor ceremony locations including our garden pavilion and riverside grove.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    👰
   </div>
   <h3>
    Bridal Suite
   </h3>
   <p>
    Spacious bridal suite with private entrance, full amenities, and stunning views for preparation.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    🍽️
   </div>
   <h3>
    Catering Excellence
   </h3>
   <p>
    Full-service kitchen and partnerships with the region's finest caterers and culinary artists.
   </p>
  </div>
  <div class="feature-card">
   <div class="feature-icon">
    📸
   </div>
   <h3>
    Photo Opportunities
   </h3>
   <p>
    Countless scenic backdrops including vintage bridges, wildflower meadows, and golden hour vineyard rows.
   </p>
  </div>
 </div>
</section>

CSS

.feature-card h3 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
.feature-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid rgba(212,165,116,0.2);
            cursor: pointer;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }
.features {
            padding: 100px 50px;
            background: linear-gradient(180deg, var(--light) 0%, #F5F0E8 100%);
        }
.feature-card:hover .feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.features-grid { grid-template-columns: 1fr; }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            transition: all 0.4s ease;
        }
.feature-icon {
            transform: rotate(360deg) scale(1.1);
        }
.feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 50px rgba(212,165,116,0.3);
            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(212,165,116,0.1) 100%);
        }
.feature-card p {
            color: #666;
            line-height: 1.6;
        }
.features h2 {
            text-align: center;
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 60px;
            letter-spacing: 2px;
        }

Sections - About Content

SECTIONS html> comp-346

A sections component. Contains 6 child elements.

Your Perfect Day
Awaits

Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.

With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.

Every wedding here tells a unique stor...

HTML

<div class="about-content">
 <h2>
  Your
  <span class="accent-text">
   Perfect Day
  </span>
  <br/>
  Awaits
 </h2>
 <p>
  Nestled along the scenic Rum River, our historic barn has been lovingly restored to create the perfect blend of rustic elegance and modern comfort.
 </p>
 <p>
  With sprawling vineyards, century-old oak trees, and breathtaking sunset views, Rum River Barn & Vineyard offers an enchanting backdrop for your special day.
 </p>
 <p>
  Every wedding here tells a unique story, and we're honored to be part of yours.
 </p>
</div>

CSS

.about-content h2 {
            font-size: 48px;
            color: var(--dark);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
            animation: slideInLeft 1s ease;
        }
.accent-text {
            color: var(--wine);
            font-style: italic;
        }
.about-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 20px;
            animation: fadeIn 1.5s ease 0.3s both;
        }

Heroes - Home

HEROES html> comp-355

A heroes component containing links. Contains 24 child elements.

HTML

<section class="hero" id="home">
 <div class="hero-background">
  <div class="hero-image-layer">
  </div>
  <div class="hero-pattern">
  </div>
  <div class="barn-silhouette">
  </div>
  <div class="light-rays">
  </div>
  <div class="particles">
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
   <span class="particle">
   </span>
  </div>
 </div>
 <div class="decorative-frame">
  <div class="vine-left">
  </div>
  <div class="vine-right">
  </div>
 </div>
 <div class="hero-content">
  <div class="hero-subtitle">
   WELCOME TO
  </div>
  <h1 class="hero-title">
   Rum River
   <br/>
   Barn & Vineyard
  </h1>
  <p class="hero-description">
   Where Rustic Charm Meets Timeless Romance
  </p>
  <a class="cta-button" href="#contact">
   START YOUR JOURNEY
  </a>
 </div>
</section>

CSS

.particle:nth-child(8) { left: 80%; width: 5px; height: 5px; animation-delay: 3s; animation-duration: 15s; }
.hero-content::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            right: -40px;
            bottom: -40px;
            border: 1px solid rgba(212, 165, 116, 0.1);
            border-radius: 30px;
            animation: pulse 4s ease-in-out infinite 0.5s;
        }
.vine-right {
            position: absolute;
            top: 10%;
            right: 5%;
            width: 200px;
            height: 400px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M20,0 Q50,50 40,100 T60,200 Q80,250 70,300 T80,400" stroke="%23D4A574" stroke-width="2" fill="none" opacity="0.3"/><circle cx="40" cy="80" r="8" fill="%23D4A574" opacity="0.2"/><circle cx="60" cy="180" r="6" fill="%23D4A574" opacity="0.2"/><circle cx="70" cy="280" r="7" fill="%23D4A574" opacity="0.2"/><path d="M40,80 Q60,70 70,85" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><path d="M60,180 Q80,170 90,185" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/></svg>');
            background-repeat: no-repeat;
            animation: swayRight 8s ease-in-out infinite;
        }
.cta-button:hover::before {
            width: 300px;
            height: 300px;
        }
.cta-button {
            display: inline-block;
            padding: 18px 45px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
            color: var(--light);
            text-decoration: none;
            font-size: 18px;
            letter-spacing: 2px;
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: pulse 2s infinite;
            position: relative;
            overflow: hidden;
        }
.particle:nth-child(2) { left: 20%; width: 4px; height: 4px; animation-delay: 2s; animation-duration: 15s; }
.barn-silhouette {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 60%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 600"><path d="M700,400 L700,200 L960,50 L1220,200 L1220,400 L1100,400 L1100,250 L960,150 L820,250 L820,400 Z" fill="%23000000" opacity="0.3"/><rect x="850" y="300" width="60" height="100" fill="%23D4A574" opacity="0.4"/><rect x="1010" y="300" width="60" height="100" fill="%23D4A574" opacity="0.4"/><path d="M0,600 Q200,500 400,550 T800,500 Q1000,450 1200,500 T1600,450 Q1760,400 1920,500 L1920,600 Z" fill="%231a1410" opacity="0.8"/></svg>');
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.6;
        }
.particle:nth-child(3) { left: 30%; width: 8px; height: 8px; animation-delay: 4s; animation-duration: 18s; }
.hero-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
        }
.hero-image-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #2C1810 0%, #8B7355 50%, #D4A574 100%);
            opacity: 0.6;
            animation: slowZoom 20s ease-in-out infinite alternate;
        }
.decorative-frame {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 5;
        }
.particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
.particle:nth-child(9) { left: 90%; width: 8px; height: 8px; animation-delay: 5s; animation-duration: 14s; }
.particle:nth-child(1) { left: 10%; width: 6px; height: 6px; animation-delay: 0s; animation-duration: 12s; }
.cta-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
            transition: all 0.5s ease;
            transform: translate(-50%, -50%);
        }
.hero-description {
            font-size: 24px;
            font-style: italic;
            margin-bottom: 50px;
            opacity: 0.95;
            animation: fadeIn 2s ease 0.8s both;
            color: rgba(250, 247, 243, 0.9);
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
.hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><pattern id="vines" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M50,0 Q100,50 50,100 T50,200" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><circle cx="50" cy="50" r="3" fill="%23D4A574" opacity="0.3"/><circle cx="50" cy="150" r="3" fill="%23D4A574" opacity="0.3"/></pattern></defs><rect width="1920" height="1080" fill="url(%23vines)"/><path d="M0,800 Q480,700 960,800 T1920,800 L1920,1080 L0,1080 Z" fill="%232C1810" opacity="0.5"/></svg>');
            background-size: cover;
            animation: float 15s ease-in-out infinite;
        }
.hero-subtitle {
            font-size: 18px;
            letter-spacing: 6px;
            margin-bottom: 20px;
            opacity: 0.9;
            animation: fadeIn 2s ease 0.5s both;
            position: relative;
            display: inline-block;
            padding: 0 60px;
        }
.hero-subtitle::after {
            right: 0;
        }
.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(212,165,116,0.4);
        }
.hero-subtitle::before {
            left: 0;
        }
.hero {
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1410;
            overflow: hidden;
        }
.particle {
            position: absolute;
            background: radial-gradient(circle, rgba(212, 165, 116, 0.8) 0%, transparent 70%);
            border-radius: 50%;
            animation: floatUp 15s linear infinite;
        }
.hero-content {
            text-align: center;
            color: var(--light);
            z-index: 10;
            position: relative;
            animation: slideUp 1.5s ease;
            padding: 40px;
            background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }
.light-rays {
            position: absolute;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            background: conic-gradient(from 0deg at 50% 50%, 
                transparent 0deg,
                rgba(212, 165, 116, 0.1) 10deg,
                transparent 20deg,
                transparent 40deg,
                rgba(212, 165, 116, 0.1) 50deg,
                transparent 60deg,
                transparent 80deg,
                rgba(212, 165, 116, 0.1) 90deg,
                transparent 100deg,
                transparent 120deg,
                rgba(212, 165, 116, 0.1) 130deg,
                transparent 140deg,
                transparent 360deg
            );
            animation: rotate 60s linear infinite;
            opacity: 0.5;
        }
.hero-title {
            font-size: 82px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            letter-spacing: 3px;
            animation: slideUp 1.5s ease 0.3s both;
            background: linear-gradient(180deg, var(--light) 0%, rgba(212, 165, 116, 0.9) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }
.hero-title { font-size: 48px; }
.particle:nth-child(5) { left: 50%; width: 7px; height: 7px; animation-delay: 8s; animation-duration: 16s; }
.particle:nth-child(6) { left: 60%; width: 4px; height: 4px; animation-delay: 10s; animation-duration: 13s; }
.hero-content::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 2px solid rgba(212, 165, 116, 0.3);
            border-radius: 25px;
            animation: pulse 4s ease-in-out infinite;
        }
.particle:nth-child(4) { left: 40%; width: 5px; height: 5px; animation-delay: 6s; animation-duration: 14s; }
.vine-left {
            position: absolute;
            top: 10%;
            left: 5%;
            width: 200px;
            height: 400px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M180,0 Q150,50 160,100 T140,200 Q120,250 130,300 T120,400" stroke="%23D4A574" stroke-width="2" fill="none" opacity="0.3"/><circle cx="160" cy="80" r="8" fill="%23D4A574" opacity="0.2"/><circle cx="140" cy="180" r="6" fill="%23D4A574" opacity="0.2"/><circle cx="130" cy="280" r="7" fill="%23D4A574" opacity="0.2"/><path d="M160,80 Q140,70 130,85" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><path d="M140,180 Q120,170 110,185" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/></svg>');
            background-repeat: no-repeat;
            animation: swayLeft 8s ease-in-out infinite;
        }
.hero-subtitle::before,
        .hero-subtitle::after {
            content: '❦';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent);
            font-size: 24px;
            animation: pulse 2s ease-in-out infinite;
        }
.particle:nth-child(7) { left: 70%; width: 6px; height: 6px; animation-delay: 1s; animation-duration: 17s; }

Headers - Features Header

HEADERS html> comp-387

A headers component. Contains 2 child elements.

Why Choose Us

400 Acres of Pure Country Magic

...

HTML

<div class="features-header">
 <p class="script-font">
  Why Choose Us
 </p>
 <h2>
  400 Acres of Pure Country Magic
 </h2>
</div>

CSS

.features-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.features-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.features-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Headers - Timeline Header

HEADERS html> comp-388

A headers component. Contains 3 child elements.

Your Journey

From First Visit to "I Do"

We're with you every step of the way, ensuring your special day unfolds perfectly.

...

HTML

<div class="timeline-header">
 <p class="script-font">
  Your Journey
 </p>
 <h2>
  From First Visit to "I Do"
 </h2>
 <p>
  We're with you every step of the way, ensuring your special day unfolds perfectly.
 </p>
</div>

CSS

.timeline-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.timeline-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.timeline-header p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.timeline-header {
            text-align: center;
            margin-bottom: 80px;
        }

Headers - Testimonials Header

HEADERS html> comp-389

A headers component. Contains 2 child elements.

Love Stories

What Our Couples Say

...

HTML

<div class="testimonials-header">
 <p class="script-font">
  Love Stories
 </p>
 <h2>
  What Our Couples Say
 </h2>
</div>

CSS

.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.testimonials-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
        }

Headers - Faq Header

HEADERS html> comp-390

A headers component. Contains 2 child elements.

Questions?

Everything You Need to Know

...

HTML

<div class="faq-header">
 <p class="script-font">
  Questions?
 </p>
 <h2>
  Everything You Need to Know
 </h2>
</div>

CSS

.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.faq-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.faq-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.faq-header {
            text-align: center;
            margin-bottom: 80px;
        }

Headers - Gallery Header

HEADERS html> comp-391

A headers component. Contains 2 child elements.

Explore

Our Scenic Spaces

...

HTML

<div class="gallery-header">
 <p class="script-font">
  Explore
 </p>
 <h2>
  Our Scenic Spaces
 </h2>
</div>

CSS

.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.gallery-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.gallery-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.gallery-header {
            text-align: center;
            margin-bottom: 80px;
        }

Heroes - Split Hero

HEROES html> comp-392

A heroes component containing images. Contains 17 child elements.

Your Dream Venue Awaits

A Picturesque Setting for Your Perfect Day

When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.

Unlike traditional ven...

HTML

<section class="split-hero">
 <div class="split-hero-container">
  <div class="split-content">
   <p class="script-font">
    Your Dream Venue Awaits
   </p>
   <h2>
    A Picturesque Setting for Your Perfect Day
   </h2>
   <p>
    When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.
   </p>
   <p>
    Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full support to bring every detail to life.
   </p>
   <div class="location-tags">
    <span class="location-tag">
     NEAR MILACA
    </span>
    <span class="location-tag">
     SAINT PAUL
    </span>
    <span class="location-tag">
     ST. CLOUD
    </span>
    <span class="location-tag">
     BRAINERD
    </span>
   </div>
   <p style="color: var(--primary-brown); font-weight: bold;">
    📞 Reserve Your Date: 612-801-0546
   </p>
  </div>
  <div class="split-image">
   <img alt="Rum River Barn exterior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=1000"/>
   <div class="split-image-overlay">
    <h4>
     Book Early
    </h4>
    <p>
     Our calendar fills quickly—secure your perfect date today!
    </p>
   </div>
  </div>
 </div>
</section>

CSS

.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }
.split-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.split-image-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
.split-hero {
            position: relative;
            min-height: 600px;
            overflow: hidden;
            background: white;
        }
.split-hero-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.split-content .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.split-content::after {
            content: '';
            position: absolute;
            right: -100px;
            top: 0;
            bottom: 0;
            width: 200px;
            background: var(--warm-cream);
            transform: skewX(-5deg);
        }
.split-content h2 {
            font-size: 52px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }
.split-image-overlay h4 {
            color: var(--deep-brown);
            font-size: 24px;
            margin-bottom: 10px;
        }
.split-content h2 {
                font-size: 36px;
            }
.split-image-overlay p {
            color: var(--text-light);
            font-size: 14px;
        }
.split-hero-container {
                grid-template-columns: 1fr;
            }
.split-content::after {
                display: none;
            }
.split-content {
                padding: 60px 40px;
            }
.split-content p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 20px;
        }
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.split-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.split-image {
            position: relative;
            overflow: hidden;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Heroes - Split Hero Container

HEROES html> comp-393

A heroes component containing images. Contains 16 child elements.

Your Dream Venue Awaits

A Picturesque Setting for Your Perfect Day

When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.

Unlike traditional venues, we believe in saying "yes" to your vi...

HTML

<div class="split-hero-container">
 <div class="split-content">
  <p class="script-font">
   Your Dream Venue Awaits
  </p>
  <h2>
   A Picturesque Setting for Your Perfect Day
  </h2>
  <p>
   When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.
  </p>
  <p>
   Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full support to bring every detail to life.
  </p>
  <div class="location-tags">
   <span class="location-tag">
    NEAR MILACA
   </span>
   <span class="location-tag">
    SAINT PAUL
   </span>
   <span class="location-tag">
    ST. CLOUD
   </span>
   <span class="location-tag">
    BRAINERD
   </span>
  </div>
  <p style="color: var(--primary-brown); font-weight: bold;">
   📞 Reserve Your Date: 612-801-0546
  </p>
 </div>
 <div class="split-image">
  <img alt="Rum River Barn exterior" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=1000"/>
  <div class="split-image-overlay">
   <h4>
    Book Early
   </h4>
   <p>
    Our calendar fills quickly—secure your perfect date today!
   </p>
  </div>
 </div>
</div>

CSS

.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }
.split-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.split-image-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
.split-hero-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 600px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.split-content .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.split-content::after {
            content: '';
            position: absolute;
            right: -100px;
            top: 0;
            bottom: 0;
            width: 200px;
            background: var(--warm-cream);
            transform: skewX(-5deg);
        }
.split-content h2 {
            font-size: 52px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }
.split-image-overlay h4 {
            color: var(--deep-brown);
            font-size: 24px;
            margin-bottom: 10px;
        }
.split-content h2 {
                font-size: 36px;
            }
.split-image-overlay p {
            color: var(--text-light);
            font-size: 14px;
        }
.split-hero-container {
                grid-template-columns: 1fr;
            }
.split-content::after {
                display: none;
            }
.split-content {
                padding: 60px 40px;
            }
.split-content p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 20px;
        }
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.split-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.split-image {
            position: relative;
            overflow: hidden;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Heroes - Cta Banner

HEROES html> comp-394

A heroes component containing buttons, links. Contains 8 child elements.

Ready to Start Planning?

Your Perfect Day Awaits

Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.

Call 612-801-0546

<section class="cta-banner">
 <div class="container">
  <div class="cta-content">
   <p class="script-font">
    Ready to Start Planning?
   </p>
   <h2>
    Your Perfect Day Awaits
   </h2>
   <p>
    Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.
   </p>
   <div class="cta-buttons">
    <a class="btn-primary" href="tel:612-801-0546">
     Call 612-801-0546
    </a>
    <a class="btn-secondary" href="#tour">
     Schedule a Tour
    </a>
   </div>
  </div>
 </div>
</section>

.cta-content p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            max-width: 700px;
            margin: 0 auto 40px;
            line-height: 1.8;
        }
.btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
.btn-secondary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
        }
.btn-primary,
        .btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
.cta-content .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.cta-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
            animation: rotate 30s linear infinite;
        }
.btn-primary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
        }
.cta-content {
            text-align: center;
            position: relative;
            z-index: 1;
        }
.cta-content h2 {
                font-size: 36px;
            }
.cta-content h2 {
            font-size: 56px;
            color: white;
            margin-bottom: 30px;
            line-height: 1.2;
        }
.btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.cta-banner {
            padding: 120px 0;
            background: linear-gradient(135deg, var(--wine) 0%, var(--deep-brown) 100%);
            position: relative;
            overflow: hidden;
        }
.btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.btn-primary {
            background: var(--accent-gold);
            color: white;
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.4);
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }

Galleries - Gallery Section

GALLERIES html> comp-395

A galleries component containing images, buttons. Contains 41 child elements.

Explore

Our Scenic Spaces

<section class="gallery-section">
 <div class="container">
  <div class="gallery-header">
   <p class="script-font">
    Explore
   </p>
   <h2>
    Our Scenic Spaces
   </h2>
  </div>
  <div class="gallery-filters">
   <button class="filter-btn active">
    All
   </button>
   <button class="filter-btn">
    Ceremony
   </button>
   <button class="filter-btn">
    Reception
   </button>
   <button class="filter-btn">
    Grounds
   </button>
   <button class="filter-btn">
    Details
   </button>
  </div>
  <div class="gallery-grid">
   <div class="gallery-item">
    <img alt="Barn Interior" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600"/>
    <div class="gallery-overlay">
     <h4>
      The Historic Barn
     </h4>
     <p>
      Restored with love, ready for celebration
     </p>
    </div>
   </div>
   <div class="gallery-item tall">
    <img alt="Vineyard View" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=600"/>
    <div class="gallery-overlay">
     <h4>
      Vineyard Overlook
     </h4>
     <p>
      Say "I do" with stunning views
     </p>
    </div>
   </div>
   <div class="gallery-item">
    <img alt="Reception Setup" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
    <div class="gallery-overlay">
     <h4>
      Reception Ready
     </h4>
     <p>
      Elegant rustic dining spaces
     </p>
    </div>
   </div>
   <div class="gallery-item">
    <img alt="Oak Grove" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
    <div class="gallery-overlay">
     <h4>
      Century Oak Grove
     </h4>
     <p>
      Natural cathedral for ceremonies
     </p>
    </div>
   </div>
   <div class="gallery-item">
    <img alt="Sunset Photos" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=600"/>
    <div class="gallery-overlay">
     <h4>
      Golden Hour Magic
     </h4>
     <p>
      Perfect lighting for photos
     </p>
    </div>
   </div>
   <div class="gallery-item tall">
    <img alt="Brook Path" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600"/>
    <div class="gallery-overlay">
     <h4>
      Whispering Brook Trail
     </h4>
     <p>
      Romantic walks and photo ops
     </p>
    </div>
   </div>
  </div>
 </div>
</section>

.tall {
            grid-row: span 2;
        }
.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-section {
            padding: 100px 0;
            background: var(--warm-cream);
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-filters {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.filter-btn.active,
        .filter-btn:hover {
            background: var(--accent-gold);
            color: white;
        }
.active .faq-toggle {
            transform: rotate(45deg);
        }
.gallery-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.active,
        .filter-btn:hover {
            background: var(--accent-gold);
            color: white;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.filter-btn {
            padding: 12px 30px;
            background: white;
            border: 2px solid var(--accent-gold);
            border-radius: 30px;
            color: var(--primary-brown);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.gallery-grid {
                grid-template-columns: 1fr;
            }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-header {
            text-align: center;
            margin-bottom: 80px;
        }

Galleries - Gallery Filters

GALLERIES html> comp-397

A galleries component containing buttons. Contains 5 child elements.

<div class="gallery-filters">
 <button class="filter-btn active">
  All
 </button>
 <button class="filter-btn">
  Ceremony
 </button>
 <button class="filter-btn">
  Reception
 </button>
 <button class="filter-btn">
  Grounds
 </button>
 <button class="filter-btn">
  Details
 </button>
</div>

.filter-btn.active,
        .filter-btn:hover {
            background: var(--accent-gold);
            color: white;
        }
.active .faq-toggle {
            transform: rotate(45deg);
        }
.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.gallery-filters {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
.active,
        .filter-btn:hover {
            background: var(--accent-gold);
            color: white;
        }
.filter-btn {
            padding: 12px 30px;
            background: white;
            border: 2px solid var(--accent-gold);
            border-radius: 30px;
            color: var(--primary-brown);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

Galleries - Gallery Grid

GALLERIES html> comp-398

A galleries component containing images. Contains 30 child elements.

The Historic Barn

Restored with love, ready for celebration

Vineyard Overlo...

<div class="gallery-grid">
 <div class="gallery-item">
  <img alt="Barn Interior" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600"/>
  <div class="gallery-overlay">
   <h4>
    The Historic Barn
   </h4>
   <p>
    Restored with love, ready for celebration
   </p>
  </div>
 </div>
 <div class="gallery-item tall">
  <img alt="Vineyard View" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=600"/>
  <div class="gallery-overlay">
   <h4>
    Vineyard Overlook
   </h4>
   <p>
    Say "I do" with stunning views
   </p>
  </div>
 </div>
 <div class="gallery-item">
  <img alt="Reception Setup" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
  <div class="gallery-overlay">
   <h4>
    Reception Ready
   </h4>
   <p>
    Elegant rustic dining spaces
   </p>
  </div>
 </div>
 <div class="gallery-item">
  <img alt="Oak Grove" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
  <div class="gallery-overlay">
   <h4>
    Century Oak Grove
   </h4>
   <p>
    Natural cathedral for ceremonies
   </p>
  </div>
 </div>
 <div class="gallery-item">
  <img alt="Sunset Photos" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=600"/>
  <div class="gallery-overlay">
   <h4>
    Golden Hour Magic
   </h4>
   <p>
    Perfect lighting for photos
   </p>
  </div>
 </div>
 <div class="gallery-item tall">
  <img alt="Brook Path" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600"/>
  <div class="gallery-overlay">
   <h4>
    Whispering Brook Trail
   </h4>
   <p>
    Romantic walks and photo ops
   </p>
  </div>
 </div>
</div>

.tall {
            grid-row: span 2;
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-grid {
                grid-template-columns: 1fr;
            }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Item

GALLERIES html> comp-399

A galleries component containing images. Contains 4 child elements.

The Historic Barn

Restored with love, ready for celebration

<div class="gallery-item">
 <img alt="Barn Interior" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600"/>
 <div class="gallery-overlay">
  <h4>
   The Historic Barn
  </h4>
  <p>
   Restored with love, ready for celebration
  </p>
 </div>
</div>

.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-400

A galleries component. Contains 2 child elements.

The Historic Barn

Restored with love, ready for celebration

<div class="gallery-overlay">
 <h4>
  The Historic Barn
 </h4>
 <p>
  Restored with love, ready for celebration
 </p>
</div>

.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item Tall

GALLERIES html> comp-401

A galleries component containing images. Contains 4 child elements.

Vineyard Overlook

Say "I do" with stunning views

<div class="gallery-item tall">
 <img alt="Vineyard View" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Vineyard Overlook
  </h4>
  <p>
   Say "I do" with stunning views
  </p>
 </div>
</div>

.tall {
            grid-row: span 2;
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-402

A galleries component. Contains 2 child elements.

Vineyard Overlook

Say "I do" with stunning views

<div class="gallery-overlay">
 <h4>
  Vineyard Overlook
 </h4>
 <p>
  Say "I do" with stunning views
 </p>
</div>

.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item

GALLERIES html> comp-403

A galleries component containing images. Contains 4 child elements.

Reception Ready

Elegant rustic dining spaces

<div class="gallery-item">
 <img alt="Reception Setup" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Reception Ready
  </h4>
  <p>
   Elegant rustic dining spaces
  </p>
 </div>
</div>

.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-404

A galleries component. Contains 2 child elements.

Reception Ready

Elegant rustic dining spaces

<div class="gallery-overlay">
 <h4>
  Reception Ready
 </h4>
 <p>
  Elegant rustic dining spaces
 </p>
</div>

.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item

GALLERIES html> comp-405

A galleries component containing images. Contains 4 child elements.

Century Oak Grove

Natural cathedral for ceremonies

<div class="gallery-item">
 <img alt="Oak Grove" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Century Oak Grove
  </h4>
  <p>
   Natural cathedral for ceremonies
  </p>
 </div>
</div>

.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-406

A galleries component. Contains 2 child elements.

Century Oak Grove

Natural cathedral for ceremonies

<div class="gallery-overlay">
 <h4>
  Century Oak Grove
 </h4>
 <p>
  Natural cathedral for ceremonies
 </p>
</div>

.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item

GALLERIES html> comp-407

A galleries component containing images. Contains 4 child elements.

Golden Hour Magic

Perfect lighting for photos

<div class="gallery-item">
 <img alt="Sunset Photos" src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Golden Hour Magic
  </h4>
  <p>
   Perfect lighting for photos
  </p>
 </div>
</div>

.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-408

A galleries component. Contains 2 child elements.

Golden Hour Magic

Perfect lighting for photos

<div class="gallery-overlay">
 <h4>
  Golden Hour Magic
 </h4>
 <p>
  Perfect lighting for photos
 </p>
</div>

.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Gallery Item Tall

GALLERIES html> comp-409

A galleries component containing images. Contains 4 child elements.

Whispering Brook Trail

Romantic walks and photo ops

<div class="gallery-item tall">
 <img alt="Brook Path" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600"/>
 <div class="gallery-overlay">
  <h4>
   Whispering Brook Trail
  </h4>
  <p>
   Romantic walks and photo ops
  </p>
 </div>
</div>

.tall {
            grid-row: span 2;
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-item:hover img {
            transform: scale(1.1);
        }
.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
        }
.gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
.gallery-item.tall {
            grid-row: span 2;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-item:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

Galleries - Gallery Overlay

GALLERIES html> comp-410

A galleries component. Contains 2 child elements.

Whispering Brook Trail

Romantic walks and photo ops

<div class="gallery-overlay">
 <h4>
  Whispering Brook Trail
 </h4>
 <p>
  Romantic walks and photo ops
 </p>
</div>

.gallery-overlay h4 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
        }
.gallery-overlay {
            transform: translateY(0);
        }
.gallery-overlay p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
.gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(44, 36, 22, 0.9) 100%);
            padding: 30px 20px 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }

Galleries - Features Grid

GALLERIES html> comp-411

A galleries component. Contains 24 child elements.

🍇

Vineyard Views

Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.

🌳

Century-Old Oaks

Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.

<...

<div class="features-grid">
 <div class="feature-card">
  <div class="feature-icon">
   🍇
  </div>
  <h3>
   Vineyard Views
  </h3>
  <p>
   Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🌳
  </div>
  <h3>
   Century-Old Oaks
  </h3>
  <p>
   Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🏚️
  </div>
  <h3>
   Historic Barn
  </h3>
  <p>
   Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   💧
  </div>
  <h3>
   Whispering Brook
  </h3>
  <p>
   A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   ✨
  </div>
  <h3>
   Your Vision, Our Yes
  </h3>
  <p>
   We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.
  </p>
 </div>
 <div class="feature-card">
  <div class="feature-icon">
   🌄
  </div>
  <h3>
   Hillside Serenity
  </h3>
  <p>
   Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.
  </p>
 </div>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.features-grid,
            .timeline-items,
            .stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Galleries - Stats Grid

GALLERIES html> comp-412

A galleries component. Contains 12 child elements.

<div class="stats-grid">
 <div class="stat-item">
  <div class="stat-number">
   400
  </div>
  <div class="stat-label">
   Scenic Acres
  </div>
 </div>
 <div class="stat-item">
  <div class="stat-number">
   100+
  </div>
  <div class="stat-label">
   Years of History
  </div>
 </div>
 <div class="stat-item">
  <div class="stat-number">
   300
  </div>
  <div class="stat-label">
   Guest Capacity
  </div>
 </div>
 <div class="stat-item">
  <div class="stat-number">
   5★
  </div>
  <div class="stat-label">
   Average Rating
  </div>
 </div>
</div>

.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            text-align: center;
        }
.stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.stat-number {
            font-size: 64px;
            font-weight: bold;
            color: var(--accent-gold);
            margin-bottom: 10px;
            font-family: 'Playfair Display', Georgia, serif;
        }
.stat-label {
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
        }
.stat-item {
            color: white;
        }

Cards - Feature Card

CARDS html> comp-414

A cards component. Contains 3 child elements.

🍇

Vineyard Views

Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.

<div class="feature-card">
 <div class="feature-icon">
  🍇
 </div>
 <h3>
  Vineyard Views
 </h3>
 <p>
  Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.
 </p>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-415

A cards component. Contains 3 child elements.

🌳

Century-Old Oaks

Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.

<div class="feature-card">
 <div class="feature-icon">
  🌳
 </div>
 <h3>
  Century-Old Oaks
 </h3>
 <p>
  Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.
 </p>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-416

A cards component. Contains 3 child elements.

🏚️

Historic Barn

Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.

<div class="feature-card">
 <div class="feature-icon">
  🏚️
 </div>
 <h3>
  Historic Barn
 </h3>
 <p>
  Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.
 </p>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-417

A cards component. Contains 3 child elements.

💧

Whispering Brook

A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.

<div class="feature-card">
 <div class="feature-icon">
  💧
 </div>
 <h3>
  Whispering Brook
 </h3>
 <p>
  A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.
 </p>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-418

A cards component. Contains 3 child elements.

✨

Your Vision, Our Yes

We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.

<div class="feature-card">
 <div class="feature-icon">
  ✨
 </div>
 <h3>
  Your Vision, Our Yes
 </h3>
 <p>
  We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.
 </p>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Feature Card

CARDS html> comp-419

A cards component. Contains 3 child elements.

🌄

Hillside Serenity

Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.

<div class="feature-card">
 <div class="feature-icon">
  🌄
 </div>
 <h3>
  Hillside Serenity
 </h3>
 <p>
  Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.
 </p>
</div>

.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }

Cards - Testimonial Card

CARDS html> comp-420

A cards component containing images. Contains 12 child elements.

"Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"

Sarah & Michael Johnson

<div class="testimonial-card">
 <p class="testimonial-text">
  "Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"
 </p>
 <div class="testimonial-author">
  <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
  <div class="author-info">
   <h4>
    Sarah & Michael Johnson
   </h4>
   <p>
    Married June 2024
   </p>
  </div>
 </div>
 <div class="rating">
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
 </div>
</div>

.testimonial-card {
            background: white;
            padding: 60px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
.testimonial-text {
            font-size: 22px;
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-style: italic;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 120px;
            color: var(--accent-gold);
            opacity: 0.2;
            font-family: Georgia, serif;
        }
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.star {
            color: var(--accent-gold);
            font-size: 20px;
        }
.rating {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }
.testimonial-card {
                padding: 40px 30px;
            }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

Cards - Testimonials Section

CARDS html> comp-421

A cards component containing images. Contains 18 child elements.

Love Stories

What Our Couples Say

"Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are stil...

<section class="testimonials-section">
 <div class="container">
  <div class="testimonials-header">
   <p class="script-font">
    Love Stories
   </p>
   <h2>
    What Our Couples Say
   </h2>
  </div>
  <div class="testimonials-container">
   <div class="testimonial-card">
    <p class="testimonial-text">
     "Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"
    </p>
    <div class="testimonial-author">
     <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
     <div class="author-info">
      <h4>
       Sarah & Michael Johnson
      </h4>
      <p>
       Married June 2024
      </p>
     </div>
    </div>
    <div class="rating">
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
    </div>
   </div>
  </div>
 </div>
</section>

.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.testimonials-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header {
            text-align: center;
            margin-bottom: 80px;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.rating {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }
.testimonial-card {
                padding: 40px 30px;
            }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
.testimonial-text {
            font-size: 22px;
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-style: italic;
        }
.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 120px;
            color: var(--accent-gold);
            opacity: 0.2;
            font-family: Georgia, serif;
        }
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.testimonials-section {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 50%, var(--warm-cream) 100%);
        }
.star {
            color: var(--accent-gold);
            font-size: 20px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.testimonial-card {
            background: white;
            padding: 60px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
.testimonials-container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.testimonials-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
        }

Cards - Testimonials Container

CARDS html> comp-423

A cards component containing images. Contains 13 child elements.

"Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"

<div class="testimonials-container">
 <div class="testimonial-card">
  <p class="testimonial-text">
   "Rum River Barn exceeded every expectation. The freedom to design our day exactly as we envisioned, combined with the breathtaking vineyard views, created pure magic. Our guests are still talking about it!"
  </p>
  <div class="testimonial-author">
   <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
   <div class="author-info">
    <h4>
     Sarah & Michael Johnson
    </h4>
    <p>
     Married June 2024
    </p>
   </div>
  </div>
  <div class="rating">
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
  </div>
 </div>
</div>

.testimonial-card {
            background: white;
            padding: 60px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            text-align: center;
            position: relative;
        }
.testimonials-container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
        }
.testimonial-text {
            font-size: 22px;
            line-height: 1.8;
            color: var(--text-dark);
            margin-bottom: 40px;
            font-style: italic;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 30px;
            left: 40px;
            font-size: 120px;
            color: var(--accent-gold);
            opacity: 0.2;
            font-family: Georgia, serif;
        }
.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.star {
            color: var(--accent-gold);
            font-size: 20px;
        }
.rating {
            display: flex;
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }
.testimonial-card {
                padding: 40px 30px;
            }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

Cards - Testimonial Author

CARDS html> comp-425

A cards component containing images. Contains 4 child elements.

Sarah & Michael Johnson

Married June 2024

<div class="testimonial-author">
 <img alt="Sarah" class="author-image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
 <div class="author-info">
  <h4>
   Sarah & Michael Johnson
  </h4>
  <p>
   Married June 2024
  </p>
 </div>
</div>

.author-info h4 {
            font-size: 20px;
            color: var(--deep-brown);
            margin-bottom: 5px;
        }
.author-info p {
            color: var(--text-light);
            font-size: 14px;
        }
.author-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-gold);
        }
.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

Sections - Features Section

SECTIONS html> comp-426

A sections component. Contains 29 child elements.

Why Choose Us

400 Acres of Pure Country Magic

🍇

Vineyard Views

Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.

<...

<section class="features-section">
 <div class="container">
  <div class="features-header">
   <p class="script-font">
    Why Choose Us
   </p>
   <h2>
    400 Acres of Pure Country Magic
   </h2>
  </div>
  <div class="features-grid">
   <div class="feature-card">
    <div class="feature-icon">
     🍇
    </div>
    <h3>
     Vineyard Views
    </h3>
    <p>
     Exchange vows overlooking our stunning grape vineyards, where rolling hills meet Minnesota's natural beauty.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     🌳
    </div>
    <h3>
     Century-Old Oaks
    </h3>
    <p>
     Mile-long paths through manicured oak forests and white pines create an enchanted backdrop for photos.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     🏚️
    </div>
    <h3>
     Historic Barn
    </h3>
    <p>
     Our restored barn combines 100 years of history with modern amenities for the perfect rustic elegance.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     💧
    </div>
    <h3>
     Whispering Brook
    </h3>
    <p>
     A peaceful stream winds through the property, offering serene ceremony spots and romantic photo opportunities.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     ✨
    </div>
    <h3>
     Your Vision, Our Yes
    </h3>
    <p>
     We believe in making dreams reality—bring your wildest ideas and watch us help them come to life.
    </p>
   </div>
   <div class="feature-card">
    <div class="feature-icon">
     🌄
    </div>
    <h3>
     Hillside Serenity
    </h3>
    <p>
     Perched on a peaceful hillside, enjoy panoramic views and the tranquil atmosphere of rural Minnesota.
    </p>
   </div>
  </div>
 </div>
</section>

.features-header {
            text-align: center;
            margin-bottom: 80px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.feature-card p {
            color: var(--text-light);
            line-height: 1.6;
        }
.feature-card h3 {
            font-size: 26px;
            color: var(--deep-brown);
            margin-bottom: 15px;
        }
.feature-card {
            text-align: center;
            padding: 40px 30px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.12);
        }
.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
.features-grid,
            .timeline-items,
            .stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.features-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-gold), var(--primary-brown));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
.features-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--accent-gold), var(--primary-brown));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.feature-card:hover::before {
            transform: scaleX(1);
        }
.features-section {
            padding: 100px 0;
            background: linear-gradient(180deg, white 0%, var(--warm-cream) 100%);
        }

Sections - Timeline Section

SECTIONS html> comp-427

A sections component. Contains 22 child elements.

Your Journey

From First Visit to "I Do"

We're with you every step of the way, ensuring your special day unfolds perfectly.

1

Schedule Your Tour

Walk our...

<section class="timeline-section">
 <div class="container timeline-container">
  <div class="timeline-header">
   <p class="script-font">
    Your Journey
   </p>
   <h2>
    From First Visit to "I Do"
   </h2>
   <p>
    We're with you every step of the way, ensuring your special day unfolds perfectly.
   </p>
  </div>
  <div class="timeline-items">
   <div class="timeline-item">
    <div class="timeline-number">
     1
    </div>
    <h3>
     Schedule Your Tour
    </h3>
    <p>
     Walk our grounds, explore the barn, and envision your celebration in our scenic spaces.
    </p>
   </div>
   <div class="timeline-item">
    <div class="timeline-number">
     2
    </div>
    <h3>
     Design Your Day
    </h3>
    <p>
     Work with our team to customize every detail—from ceremony location to reception layout.
    </p>
   </div>
   <div class="timeline-item">
    <div class="timeline-number">
     3
    </div>
    <h3>
     Vendor Freedom
    </h3>
    <p>
     Choose your own caterers, florists, and musicians—or select from our preferred partners.
    </p>
   </div>
   <div class="timeline-item">
    <div class="timeline-number">
     4
    </div>
    <h3>
     Celebrate in Style
    </h3>
    <p>
     Relax and enjoy as your vision comes to life in Minnesota's premier barn venue.
    </p>
   </div>
  </div>
 </div>
</section>

.timeline-header h2 {
            font-size: 48px;
            color: white;
            margin-bottom: 20px;
        }
.timeline-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.timeline-header p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto;
        }
.timeline-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            position: relative;
        }
.timeline-item h3 {
            font-size: 24px;
            color: white;
            margin-bottom: 15px;
        }
.timeline-item p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }
.timeline-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(212, 165, 116, 0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.timeline-container {
            position: relative;
            z-index: 1;
        }
.timeline-number {
            width: 60px;
            height: 60px;
            background: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            margin: 0 auto 20px;
            font-weight: bold;
        }
.timeline-items,
            .stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.timeline-section {
            padding: 100px 0;
            background: var(--deep-brown);
            position: relative;
            overflow: hidden;
        }
.timeline-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(212, 165, 116, 0.2);
            padding: 40px 30px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s ease;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.timeline-header {
            text-align: center;
            margin-bottom: 80px;
        }
.timeline-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

Sections - Stats Section

SECTIONS html> comp-429

A sections component. Contains 14 child elements.

<section class="stats-section">
 <div class="container">
  <div class="stats-grid">
   <div class="stat-item">
    <div class="stat-number">
     400
    </div>
    <div class="stat-label">
     Scenic Acres
    </div>
   </div>
   <div class="stat-item">
    <div class="stat-number">
     100+
    </div>
    <div class="stat-label">
     Years of History
    </div>
   </div>
   <div class="stat-item">
    <div class="stat-number">
     300
    </div>
    <div class="stat-label">
     Guest Capacity
    </div>
   </div>
   <div class="stat-item">
    <div class="stat-number">
     5★
    </div>
    <div class="stat-label">
     Average Rating
    </div>
   </div>
  </div>
 </div>
</section>

.stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            text-align: center;
        }
.stats-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }
.stat-number {
            font-size: 64px;
            font-weight: bold;
            color: var(--accent-gold);
            margin-bottom: 10px;
            font-family: 'Playfair Display', Georgia, serif;
        }
.stat-label {
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.stats-section {
            padding: 80px 0;
            background: linear-gradient(90deg, var(--primary-brown) 0%, var(--deep-brown) 100%);
        }
.stat-item {
            color: white;
        }

Sections - Faq Section

SECTIONS html> comp-430

A sections component. Contains 29 child elements.

Questions?

Everything You Need to Know

Can we bring our own vendors?

Absolutely! We believe in giving you complete creative free...

<section class="faq-section">
 <div class="container">
  <div class="faq-header">
   <p class="script-font">
    Questions?
   </p>
   <h2>
    Everything You Need to Know
   </h2>
  </div>
  <div class="faq-container">
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      Can we bring our own vendors?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.
     </p>
    </div>
   </div>
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      What's included with the venue rental?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.
     </p>
    </div>
   </div>
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      Do you have indoor and outdoor options?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.
     </p>
    </div>
   </div>
   <div class="faq-item">
    <div class="faq-question">
     <h3>
      How far in advance should we book?
     </h3>
     <span class="faq-toggle">
      +
     </span>
    </div>
    <div class="faq-answer">
     <p>
      We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.
     </p>
    </div>
   </div>
  </div>
 </div>
</section>

.faq-section {
            padding: 100px 0;
            background: white;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }
.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-header {
            text-align: center;
            margin-bottom: 80px;
        }
.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
.faq-header .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.faq-header h2 {
            font-size: 48px;
            color: var(--deep-brown);
            margin-bottom: 20px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }

Sections - Split Content

SECTIONS html> comp-449

A sections component. Contains 10 child elements.

Your Dream Venue Awaits

A Picturesque Setting for Your Perfect Day

When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.

Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full ...

<div class="split-content">
 <p class="script-font">
  Your Dream Venue Awaits
 </p>
 <h2>
  A Picturesque Setting for Your Perfect Day
 </h2>
 <p>
  When it comes to life's most precious moments—weddings, milestone celebrations, and cherished gatherings—the setting matters. At Rum River Barn & Vineyard, we don't just provide a venue; we offer a canvas for your dreams.
 </p>
 <p>
  Unlike traditional venues, we believe in saying "yes" to your vision. Your celebration, your way—with our full support to bring every detail to life.
 </p>
 <div class="location-tags">
  <span class="location-tag">
   NEAR MILACA
  </span>
  <span class="location-tag">
   SAINT PAUL
  </span>
  <span class="location-tag">
   ST. CLOUD
  </span>
  <span class="location-tag">
   BRAINERD
  </span>
 </div>
 <p style="color: var(--primary-brown); font-weight: bold;">
  📞 Reserve Your Date: 612-801-0546
 </p>
</div>

Call 612-801-0546 Schedule a Tour

.split-content p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 20px;
        }
.split-content::after {
            content: '';
            position: absolute;
            right: -100px;
            top: 0;
            bottom: 0;
            width: 200px;
            background: var(--warm-cream);
            transform: skewX(-5deg);
        }
.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.split-content h2 {
            font-size: 52px;
            color: var(--deep-brown);
            margin-bottom: 30px;
            line-height: 1.1;
        }
.split-content h2 {
                font-size: 36px;
            }
.split-content .script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.split-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px;
            background: linear-gradient(135deg, var(--warm-cream) 0%, white 100%);
            position: relative;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.split-content::after {
                display: none;
            }
.split-content {
                padding: 60px 40px;
            }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }

Sections - Cta Content

SECTIONS html> comp-450

A sections component containing buttons, links. Contains 6 child elements.

Ready to Start Planning?

Your Perfect Day Awaits

Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.

<div class="cta-content">
 <p class="script-font">
  Ready to Start Planning?
 </p>
 <h2>
  Your Perfect Day Awaits
 </h2>
 <p>
  Don't wait to secure your date at Minnesota's premier barn wedding venue. Our calendar fills quickly, and we'd love to show you around our beautiful 400-acre property.
 </p>
 <div class="cta-buttons">
  <a class="btn-primary" href="tel:612-801-0546">
   Call 612-801-0546
  </a>
  <a class="btn-secondary" href="#tour">
   Schedule a Tour
  </a>
 </div>
</div>

.cta-content p {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.9);
            max-width: 700px;
            margin: 0 auto 40px;
            line-height: 1.8;
        }
.btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.btn-primary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
.btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
.cta-content {
            text-align: center;
            position: relative;
            z-index: 1;
        }
.cta-content h2 {
                font-size: 36px;
            }
.cta-content h2 {
            font-size: 56px;
            color: white;
            margin-bottom: 30px;
            line-height: 1.2;
        }
.btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
.btn-secondary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
        }
.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
        }
.btn-primary {
            background: var(--accent-gold);
            color: white;
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.4);
        }
.btn-primary,
        .btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.script-font {
            font-size: 28px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
.btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.cta-content .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }

Modals - Split Image Overlay

MODALS html> comp-451

A modals component. Contains 2 child elements.

Book Early

Our calendar fills quickly—secure your perfect date today!

<div class="split-image-overlay">
 <h4>
  Book Early
 </h4>
 <p>
  Our calendar fills quickly—secure your perfect date today!
 </p>
</div>

Call 612-801-0546 Schedule a Tour

.split-image-overlay p {
            color: var(--text-light);
            font-size: 14px;
        }
.split-image-overlay h4 {
            color: var(--deep-brown);
            font-size: 24px;
            margin-bottom: 10px;
        }
.split-image-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }

Cta Buttons

BUTTONS html> comp-458

A buttons component containing buttons, links. Contains 2 child elements.

<div class="cta-buttons">
 <a class="btn-primary" href="tel:612-801-0546">
  Call 612-801-0546
 </a>
 <a class="btn-secondary" href="#tour">
  Schedule a Tour
 </a>
</div>

NEAR MILACA SAINT PAUL ST. CLOUD BRAINERD

.btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.btn-primary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
        }
.btn-secondary {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
.btn-secondary {
                width: 100%;
                max-width: 300px;
            }
.cta-buttons {
                flex-direction: column;
                align-items: center;
            }
.btn-secondary:hover {
            background: white;
            color: var(--deep-brown);
            transform: translateY(-3px);
        }
.btn-primary {
            background: var(--accent-gold);
            color: white;
            box-shadow: 0 6px 25px rgba(212, 165, 116, 0.4);
        }
.btn-primary,
        .btn-secondary {
            padding: 18px 45px;
            font-size: 16px;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.4s ease;
            letter-spacing: 2px;
            text-transform: uppercase;
            display: inline-block;
        }
.cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
.btn-primary,
            .btn-secondary {
                width: 100%;
                max-width: 300px;
            }

Maps - Location Tags

MAPS html> comp-462

A maps component. Contains 4 child elements.

<div class="location-tags">
 <span class="location-tag">
  NEAR MILACA
 </span>
 <span class="location-tag">
  SAINT PAUL
 </span>
 <span class="location-tag">
  ST. CLOUD
 </span>
 <span class="location-tag">
  BRAINERD
 </span>
</div>

.location-tag {
            background: rgba(212, 165, 116, 0.1);
            color: var(--primary-brown);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 13px;
            letter-spacing: 1px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            transition: all 0.3s ease;
        }
.location-tag:hover {
            background: var(--accent-gold);
            color: white;
            transform: translateY(-2px);
        }
.location-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
        }

Stats - Stat Item

STATS html> comp-465

A stats component. Contains 2 child elements.

<div class="stat-item">
 <div class="stat-number">
  100+
 </div>
 <div class="stat-label">
  Years of History
 </div>
</div>

.stat-number {
            font-size: 64px;
            font-weight: bold;
            color: var(--accent-gold);
            margin-bottom: 10px;
            font-family: 'Playfair Display', Georgia, serif;
        }
.stat-label {
            font-size: 18px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
        }
.stat-item {
            color: white;
        }

Faqs - Faq Container

FAQS html> comp-468

A faqs component. Contains 24 child elements.

Can we bring our own vendors?

Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.

<div class="faq-container">
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    Can we bring our own vendors?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.
   </p>
  </div>
 </div>
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    What's included with the venue rental?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.
   </p>
  </div>
 </div>
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    Do you have indoor and outdoor options?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.
   </p>
  </div>
 </div>
 <div class="faq-item">
  <div class="faq-question">
   <h3>
    How far in advance should we book?
   </h3>
   <span class="faq-toggle">
    +
   </span>
  </div>
  <div class="faq-answer">
   <p>
    We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.
   </p>
  </div>
 </div>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Item

FAQS html> comp-469

A faqs component. Contains 5 child elements.

Can we bring our own vendors?

Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.

<div class="faq-item">
 <div class="faq-question">
  <h3>
   Can we bring our own vendors?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   Absolutely! We believe in giving you complete creative freedom. Bring your preferred caterers, florists, photographers, and musicians. We also have a list of trusted local vendors if you need recommendations.
  </p>
 </div>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-470

A faqs component. Contains 2 child elements.

Can we bring our own vendors?

<div class="faq-question">
 <h3>
  Can we bring our own vendors?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Faqs - Faq Item

FAQS html> comp-471

A faqs component. Contains 5 child elements.

What's included with the venue rental?

Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.

<div class="faq-item">
 <div class="faq-question">
  <h3>
   What's included with the venue rental?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   Your rental includes exclusive use of our historic barn, ceremony sites, bridal suite, groom's quarters, tables, chairs, and access to our 400-acre property for photos. We also provide setup and breakdown assistance.
  </p>
 </div>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-472

A faqs component. Contains 2 child elements.

What's included with the venue rental?

<div class="faq-question">
 <h3>
  What's included with the venue rental?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Faqs - Faq Item

FAQS html> comp-473

A faqs component. Contains 5 child elements.

Do you have indoor and outdoor options?

Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.

<div class="faq-item">
 <div class="faq-question">
  <h3>
   Do you have indoor and outdoor options?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   Yes! Our property offers multiple ceremony sites including the vineyard overlook, oak grove, and brookside garden. Our barn provides a beautiful indoor space that can be decorated to match any theme or season.
  </p>
 </div>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-474

A faqs component. Contains 2 child elements.

Do you have indoor and outdoor options?

<div class="faq-question">
 <h3>
  Do you have indoor and outdoor options?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Faqs - Faq Item

FAQS html> comp-475

A faqs component. Contains 5 child elements.

How far in advance should we book?

We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.

<div class="faq-item">
 <div class="faq-question">
  <h3>
   How far in advance should we book?
  </h3>
  <span class="faq-toggle">
   +
  </span>
 </div>
 <div class="faq-answer">
  <p>
   We recommend booking 12-18 months in advance, especially for peak season dates (May through October). However, we sometimes have last-minute availability, so don't hesitate to call us at 612-801-0546.
  </p>
 </div>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-answer p {
            color: var(--text-light);
            line-height: 1.8;
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-item.active .faq-toggle {
            transform: rotate(45deg);
        }
.faq-item {
            background: var(--warm-cream);
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-item.active .faq-answer {
            padding: 20px 30px 30px;
            max-height: 500px;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }
.faq-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
.faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            background: var(--warm-cream);
        }

Faqs - Faq Question

FAQS html> comp-476

A faqs component. Contains 2 child elements.

How far in advance should we book?

<div class="faq-question">
 <h3>
  How far in advance should we book?
 </h3>
 <span class="faq-toggle">
  +
 </span>
</div>

.faq-toggle {
            transform: rotate(45deg);
        }
.faq-question h3 {
            font-size: 20px;
            color: var(--deep-brown);
        }
.faq-question:hover {
            background: var(--warm-cream);
        }
.faq-question {
            padding: 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            transition: all 0.3s ease;
        }
.faq-toggle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--accent-gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            transition: transform 0.3s ease;
        }

Headers - Headercomponent

HEADERS html> comp-481

A headers component containing links. Contains 19 child elements.

Headers - Header Content

HEADERS html> comp-482

A headers component containing links. Contains 18 child elements.

HTML

<div class="header-content">
 <div class="logo-wrapper">
  <div class="logo-circle">
   R
  </div>
 </div>
 <nav>
  <ul class="nav-menu">
   <li>
    <a class="active" href="#home">
     HOME
    </a>
   </li>
   <li>
    <a href="#about">
     ABOUT
    </a>
   </li>
   <li>
    <a href="#services">
     SERVICES
    </a>
   </li>
   <li>
    <a href="#gallery">
     GALLERY
    </a>
   </li>
   <li>
    <a href="#contact">
     CONTACT
    </a>
   </li>
  </ul>
 </nav>
 <div class="menu-toggle">
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
 </div>
</div>

CSS

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-menu a:hover::after,
.header-component .nav-menu a.active::after {
    width: 100%;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.menu-toggle {
        display: flex;
    }
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}
.active::after {
    width: 100%;
}
.logo-circle {
    border-color: var(--header-primary);
    color: var(--header-primary);
}
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}
.nav-menu a {
    color: var(--header-brown);
}
.logo-circle {
    width: 55px;
    height: 55px;
    border: 2px solid var(--header-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--header-cream);
    font-weight: 300;
    transition: all 0.4s ease;
}
.nav-menu a {
    color: var(--header-cream);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.4s ease;
}
.menu-toggle span {
    background: var(--header-dark);
}
.menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--header-cream);
    transition: all 0.4s ease;
}
.nav-menu {
        display: none;
    }

Headers - Services Header

HEADERS html> comp-483

A headers component. Contains 2 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations

...

HTML

<div class="services-header">
 <h2>
  Celebrate Every Moment
 </h2>
 <p class="subtitle">
  From intimate gatherings to grand celebrations
 </p>
</div>

CSS

.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header .subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header h2 {
    font-size: 48px;
    color: var(--services-dark);
    margin-bottom: 20px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.subtitle {
    color: white;
}
.services-header {
    text-align: center;
    margin-bottom: 80px;
}

Headers - Package Header

HEADERS html> comp-485

A headers component. Contains 3 child elements.

Intimate

$3,500 / up to 75 guests

...

HTML

<div class="package-header">
 <h3 class="package-name">
  Intimate
 </h3>
 <div class="package-price">
  $3,500
  <span>
   / up to 75 guests
  </span>
 </div>
</div>

CSS

.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}

Headers - Package Header

HEADERS html> comp-486

A headers component. Contains 3 child elements.

Classic

$5,500 / up to 150 guests

...

HTML

<div class="package-header">
 <h3 class="package-name">
  Classic
 </h3>
 <div class="package-price">
  $5,500
  <span>
   / up to 150 guests
  </span>
 </div>
</div>

CSS

.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}

Headers - Package Header

HEADERS html> comp-487

A headers component. Contains 3 child elements.

Grand

$8,500 / up to 300 guests

...

HTML

<div class="package-header">
 <h3 class="package-name">
  Grand
 </h3>
 <div class="package-price">
  $8,500
  <span>
   / up to 300 guests
  </span>
 </div>
</div>

CSS

.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}

Headers - Gallery Header

HEADERS html> comp-488

A headers component. Contains 3 child elements.

Real Love Stories

WEDDINGS AT THE BARN

Every celebration tells a unique story of love, laughter, and happily ever after

...

HTML

<div class="gallery-header">
 <p class="script-font">
  Real Love Stories
 </p>
 <h2>
  WEDDINGS AT THE BARN
 </h2>
 <p class="subtitle">
  Every celebration tells a unique story of love, laughter, and happily ever after
 </p>
</div>

CSS

.script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.gallery-header {
    text-align: center;
    margin-bottom: 80px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.subtitle {
    color: white;
}

Headers - Blog Header

HEADERS html> comp-489

A headers component. Contains 3 child elements.

Stories from the Barn

Wedding inspiration and real celebrations

...

HTML

<div class="blog-header">
 <div>
  <h2>
   Stories from the Barn
  </h2>
  <p class="subtitle">
   Wedding inspiration and real celebrations
  </p>
 </div>
</div>

CSS

.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}
.subtitle {
    color: white;
}

Headers - Testimonials Header

HEADERS html> comp-490

A headers component. Contains 2 child elements.

Love Stories

What Our Couples Say

...

HTML

<div class="testimonials-header">
 <p class="script-text">
  Love Stories
 </p>
 <h2>
  What Our Couples Say
 </h2>
</div>

CSS

.script-text {
    font-size: 28px;
    color: var(--test-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}

Headers - Nav Menu

HEADERS html> comp-493

A headers component containing links. Contains 10 child elements.

...

HTML

<ul class="nav-menu">
 <li>
  <a class="active" href="#home">
   HOME
  </a>
 </li>
 <li>
  <a href="#about">
   ABOUT
  </a>
 </li>
 <li>
  <a href="#services">
   SERVICES
  </a>
 </li>
 <li>
  <a href="#gallery">
   GALLERY
  </a>
 </li>
 <li>
  <a href="#contact">
   CONTACT
  </a>
 </li>
</ul>

CSS

.nav-menu a:hover::after,
.header-component .nav-menu a.active::after {
    width: 100%;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.active::after {
    width: 100%;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}
.nav-menu a {
    color: var(--header-brown);
}
.nav-menu a {
    color: var(--header-cream);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.4s ease;
}
.nav-menu {
        display: none;
    }

Headers - Nav

HEADERS html> comp-494

A headers component containing links. Contains 11 child elements.

...

HTML

<nav>
 <ul class="nav-menu">
  <li>
   <a class="active" href="#home">
    HOME
   </a>
  </li>
  <li>
   <a href="#about">
    ABOUT
   </a>
  </li>
  <li>
   <a href="#services">
    SERVICES
   </a>
  </li>
  <li>
   <a href="#gallery">
    GALLERY
   </a>
  </li>
  <li>
   <a href="#contact">
    CONTACT
   </a>
  </li>
 </ul>
</nav>

CSS

.nav-menu a:hover::after,
.header-component .nav-menu a.active::after {
    width: 100%;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}
.active::after {
    width: 100%;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--header-accent);
    transition: width 0.3s ease;
}
.nav-menu a {
    color: var(--header-brown);
}
.nav-menu a {
    color: var(--header-cream);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.4s ease;
}
.nav-menu {
        display: none;
    }

Heroes - Hero Component

HEROES html> comp-496

A heroes component containing buttons, links. Contains 11 child elements.

EST. 2005

Minnesota's Premier Venue

Rum River
Barn

Where rustic charm meets
modern elegance

Discover Our Story

<section class="hero-component">
 <div class="hero-container">
  <div class="hero-content">
   <div class="hero-year">
    EST. 2005
   </div>
   <div class="hero-subtitle">
    Minnesota's Premier Venue
   </div>
   <h1>
    Rum River
    <br/>
    Barn
   </h1>
   <p class="lead-text">
    Where rustic charm meets
    <br/>
    modern elegance
   </p>
   <div class="hero-buttons">
    <a class="btn btn-light" href="#about">
     Discover Our Story
    </a>
    <a class="btn btn-outline" href="#contact">
     Schedule Your Visit
    </a>
   </div>
  </div>
 </div>
</section>

Minnesota's Premier Venue

.hero-component .btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.hero-component h1 {
        font-size: 2.5rem;
    }
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-component .btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
.hero-component .hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.hero-component {
    --hero-primary: #8B6337;
    --hero-accent: #D4A574;
    --hero-cream: #FAF6F2;
    --hero-dark: #2C2416;
    --hero-brown: #4A3426;
}
.hero-component {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(rgba(31, 29, 26, 0.85), rgba(31, 29, 26, 0.6)),
                      linear-gradient(135deg, var(--hero-brown) 0%, var(--hero-dark) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}
.hero-component .hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
.hero-component h1 {
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--hero-cream);
    margin-bottom: 2rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.hero-component .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-component .hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}
.hero-component .btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.btn {
        width: 100%;
        text-align: center;
    }
.hero-component .btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-component .hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-component .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-component .btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}
.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.hero-component .lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.hero-component .btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}

Heroes - Hero Container

HEROES html> comp-497

A heroes component containing buttons, links. Contains 10 child elements.

EST. 2005

Rum River
Barn

Where rustic charm meets
modern elegance

Discover Our Story Schedule Your Visit

HTML

<div class="hero-container">
 <div class="hero-content">
  <div class="hero-year">
   EST. 2005
  </div>
  <div class="hero-subtitle">
   Minnesota's Premier Venue
  </div>
  <h1>
   Rum River
   <br/>
   Barn
  </h1>
  <p class="lead-text">
   Where rustic charm meets
   <br/>
   modern elegance
  </p>
  <div class="hero-buttons">
   <a class="btn btn-light" href="#about">
    Discover Our Story
   </a>
   <a class="btn btn-outline" href="#contact">
    Schedule Your Visit
   </a>
  </div>
 </div>
</div>

CSS

.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}
.hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

Heroes - Hero Content

HEROES html> comp-498

A heroes component containing buttons, links. Contains 9 child elements.

EST. 2005

Minnesota's Premier Venue

Rum River
Barn

Where rustic charm meets
modern elegance

Discover Our Story Schedule Your Visit

...

HTML

<div class="hero-content">
 <div class="hero-year">
  EST. 2005
 </div>
 <div class="hero-subtitle">
  Minnesota's Premier Venue
 </div>
 <h1>
  Rum River
  <br/>
  Barn
 </h1>
 <p class="lead-text">
  Where rustic charm meets
  <br/>
  modern elegance
 </p>
 <div class="hero-buttons">
  <a class="btn btn-light" href="#about">
   Discover Our Story
  </a>
  <a class="btn btn-outline" href="#contact">
   Schedule Your Visit
  </a>
 </div>
</div>

CSS

.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.hero-year {
    font-size: 1.125rem;
    color: var(--hero-accent);
    margin-bottom: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    opacity: 0.9;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--hero-cream);
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: 3rem;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.hero-subtitle {
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--hero-cream);
    margin-bottom: 1.25rem;
    opacity: 0.8;
}
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

Heroes - Hero Buttons

HEROES html> comp-499

A heroes component containing buttons, links. Contains 2 child elements.

Discover Our Story Schedule Your Visit

...

HTML

<div class="hero-buttons">
 <a class="btn btn-light" href="#about">
  Discover Our Story
 </a>
 <a class="btn btn-outline" href="#contact">
  Schedule Your Visit
 </a>
</div>

CSS

.btn-light {
    background: rgba(255, 255, 255, 0.95);
    color: var(--hero-brown);
}
.hero-buttons {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn {
        width: 100%;
        text-align: center;
    }
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.btn-light:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
.btn {
    display: inline-block;
    padding: 1.125rem 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

Galleries - Gallery Component

GALLERIES html> comp-500

A galleries component containing images. Contains 36 child elements.

Real Love Stories

WEDDINGS AT THE BARN

Every celebration tells a unique story of love, laughter, and happily ever after

HTML

<section class="gallery-component">
 <div class="gallery-container">
  <div class="gallery-header">
   <p class="script-font">
    Real Love Stories
   </p>
   <h2>
    WEDDINGS AT THE BARN
   </h2>
   <p class="subtitle">
    Every celebration tells a unique story of love, laughter, and happily ever after
   </p>
  </div>
  <div class="wedding-gallery">
   <div class="gallery-row row-1">
    <div class="gallery-item large-feature">
     <div class="gallery-image">
      <img alt="Summer wedding" src="https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1200"/>
      <div class="gallery-overlay">
       <h3>
        Emma & James
       </h3>
       <p class="wedding-season">
        Summer 2024
       </p>
       <p class="wedding-detail">
        200 Guests • Vineyard Ceremony
       </p>
      </div>
     </div>
    </div>
    <div class="gallery-item vertical">
     <div class="gallery-image">
      <img alt="First dance" src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800"/>
      <div class="gallery-overlay">
       <h3>
        Sarah & Michael
       </h3>
       <p class="wedding-season">
        Fall 2024
       </p>
       <p class="wedding-detail">
        150 Guests • Barn Reception
       </p>
      </div>
     </div>
    </div>
   </div>
   <div class="gallery-row row-2">
    <div class="gallery-item medium">
     <div class="gallery-image">
      <img alt="Outdoor ceremony" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
      <div class="gallery-overlay">
       <h3>
        Rachel & David
       </h3>
       <p class="wedding-season">
        Spring 2024
       </p>
       <p class="wedding-detail">
        100 Guests • Forest Ceremony
       </p>
      </div>
     </div>
    </div>
    <div class="gallery-item horizontal">
     <div class="gallery-image">
      <img alt="Golden hour" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1000"/>
      <div class="gallery-overlay">
       <h3>
        Jessica & Ryan
       </h3>
       <p class="wedding-season">
        Summer 2024
       </p>
       <p class="wedding-detail">
        175 Guests • Sunset Reception
       </p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.horizontal .gallery-image {
    height: 380px;
}
.gallery-component {
    --gallery-primary: #8B6337;
    --gallery-accent: #D4A574;
    --gallery-cream: #FAF6F2;
    --gallery-dark: #2C2416;
    --gallery-light: #6B5D54;
}
.gallery-component .gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-component .gallery-row.row-3 {
    grid-template-columns: 1fr 2fr 0.8fr;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-row {
    display: grid;
    gap: 30px;
}
.gallery-header {
    text-align: center;
    margin-bottom: 80px;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-overlay {
    opacity: 1;
}
.gallery-component .script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.gallery-component .gallery-item.vertical .gallery-image {
    height: 500px;
}
.row-1 {
    grid-template-columns: 2fr 1fr;
}
.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image {
        height: 300px !important;
    }
.gallery-component .gallery-row.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.vertical .gallery-image {
    height: 500px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.gallery-image {
    height: 500px;
}
.gallery-component .gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-component h2 {
    font-size: 56px;
    color: var(--gallery-dark);
    margin-bottom: 20px;
    letter-spacing: 0.08em;
    font-weight: 300;
}
.gallery-component .gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.gallery-component .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-component .gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-component .gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-component .wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.gallery-component .gallery-row.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-component .gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-component .wedding-gallery {
    display: grid;
    gap: 30px;
}
.gallery-component .gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-component .wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-component {
    padding: 120px 0;
    background: linear-gradient(180deg, white 0%, var(--gallery-cream) 100%);
}
.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-component .gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-row {
        grid-template-columns: 1fr !important;
    }
.gallery-component .gallery-header {
    text-align: center;
    margin-bottom: 80px;
}
.gallery-row.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-component .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-component .gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-component .subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-row.row-3 {
    grid-template-columns: 1fr 2fr 0.8fr;
}
.gallery-row.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-component .gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-component .gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.gallery-component .gallery-row {
    display: grid;
    gap: 30px;
}
.gallery-image {
    height: 380px;
}
.large-feature .gallery-image {
    height: 500px;
}
.gallery-component .gallery-row {
        grid-template-columns: 1fr !important;
    }
.wedding-gallery {
    display: grid;
    gap: 30px;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.medium .gallery-image {
    height: 380px;
}
.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.gallery-component .gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-component .gallery-row.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-row.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.subtitle {
    color: white;
}

Galleries - Gallery Container

GALLERIES html> comp-501

A galleries component containing images. Contains 35 child elements.

Real Love Stories

WEDDINGS AT THE BARN

Every celebration tells a unique story of love, laughter, and happily ever after

HTML

<div class="gallery-container">
 <div class="gallery-header">
  <p class="script-font">
   Real Love Stories
  </p>
  <h2>
   WEDDINGS AT THE BARN
  </h2>
  <p class="subtitle">
   Every celebration tells a unique story of love, laughter, and happily ever after
  </p>
 </div>
 <div class="wedding-gallery">
  <div class="gallery-row row-1">
   <div class="gallery-item large-feature">
    <div class="gallery-image">
     <img alt="Summer wedding" src="https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1200"/>
     <div class="gallery-overlay">
      <h3>
       Emma & James
      </h3>
      <p class="wedding-season">
       Summer 2024
      </p>
      <p class="wedding-detail">
       200 Guests • Vineyard Ceremony
      </p>
     </div>
    </div>
   </div>
   <div class="gallery-item vertical">
    <div class="gallery-image">
     <img alt="First dance" src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800"/>
     <div class="gallery-overlay">
      <h3>
       Sarah & Michael
      </h3>
      <p class="wedding-season">
       Fall 2024
      </p>
      <p class="wedding-detail">
       150 Guests • Barn Reception
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="gallery-row row-2">
   <div class="gallery-item medium">
    <div class="gallery-image">
     <img alt="Outdoor ceremony" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
     <div class="gallery-overlay">
      <h3>
       Rachel & David
      </h3>
      <p class="wedding-season">
       Spring 2024
      </p>
      <p class="wedding-detail">
       100 Guests • Forest Ceremony
      </p>
     </div>
    </div>
   </div>
   <div class="gallery-item horizontal">
    <div class="gallery-image">
     <img alt="Golden hour" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1000"/>
     <div class="gallery-overlay">
      <h3>
       Jessica & Ryan
      </h3>
      <p class="wedding-season">
       Summer 2024
      </p>
      <p class="wedding-detail">
       175 Guests • Sunset Reception
      </p>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.horizontal .gallery-image {
    height: 380px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-row {
    display: grid;
    gap: 30px;
}
.gallery-header {
    text-align: center;
    margin-bottom: 80px;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-overlay {
    opacity: 1;
}
.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.row-1 {
    grid-template-columns: 2fr 1fr;
}
.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.gallery-image {
        height: 300px !important;
    }
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.vertical .gallery-image {
    height: 500px;
}
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-row {
        grid-template-columns: 1fr !important;
    }
.gallery-row.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-row.row-3 {
    grid-template-columns: 1fr 2fr 0.8fr;
}
.gallery-row.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 380px;
}
.large-feature .gallery-image {
    height: 500px;
}
.wedding-gallery {
    display: grid;
    gap: 30px;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.medium .gallery-image {
    height: 380px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-row.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.subtitle {
    color: white;
}

Galleries - Wedding Gallery

GALLERIES html> comp-503

A galleries component containing images. Contains 30 child elements.

Emma & James

Summer 2024

200 Guests • Vineyard Ceremony

HTML

<div class="wedding-gallery">
 <div class="gallery-row row-1">
  <div class="gallery-item large-feature">
   <div class="gallery-image">
    <img alt="Summer wedding" src="https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1200"/>
    <div class="gallery-overlay">
     <h3>
      Emma & James
     </h3>
     <p class="wedding-season">
      Summer 2024
     </p>
     <p class="wedding-detail">
      200 Guests • Vineyard Ceremony
     </p>
    </div>
   </div>
  </div>
  <div class="gallery-item vertical">
   <div class="gallery-image">
    <img alt="First dance" src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800"/>
    <div class="gallery-overlay">
     <h3>
      Sarah & Michael
     </h3>
     <p class="wedding-season">
      Fall 2024
     </p>
     <p class="wedding-detail">
      150 Guests • Barn Reception
     </p>
    </div>
   </div>
  </div>
 </div>
 <div class="gallery-row row-2">
  <div class="gallery-item medium">
   <div class="gallery-image">
    <img alt="Outdoor ceremony" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
    <div class="gallery-overlay">
     <h3>
      Rachel & David
     </h3>
     <p class="wedding-season">
      Spring 2024
     </p>
     <p class="wedding-detail">
      100 Guests • Forest Ceremony
     </p>
    </div>
   </div>
  </div>
  <div class="gallery-item horizontal">
   <div class="gallery-image">
    <img alt="Golden hour" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1000"/>
    <div class="gallery-overlay">
     <h3>
      Jessica & Ryan
     </h3>
     <p class="wedding-season">
      Summer 2024
     </p>
     <p class="wedding-detail">
      175 Guests • Sunset Reception
     </p>
    </div>
   </div>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.horizontal .gallery-image {
    height: 380px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-row {
    display: grid;
    gap: 30px;
}
.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-image {
        height: 300px !important;
    }
.vertical .gallery-image {
    height: 500px;
}
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-row {
        grid-template-columns: 1fr !important;
    }
.gallery-row.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-row.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-row.row-3 {
    grid-template-columns: 1fr 2fr 0.8fr;
}
.gallery-image {
    height: 380px;
}
.large-feature .gallery-image {
    height: 500px;
}
.wedding-gallery {
    display: grid;
    gap: 30px;
}
.medium .gallery-image {
    height: 380px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-row.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Row Row 1

GALLERIES html> comp-504

A galleries component containing images. Contains 14 child elements.

Emma & James

Summer 2024

200 Guests • Vineyard Ceremony

HTML

<div class="gallery-row row-1">
 <div class="gallery-item large-feature">
  <div class="gallery-image">
   <img alt="Summer wedding" src="https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1200"/>
   <div class="gallery-overlay">
    <h3>
     Emma & James
    </h3>
    <p class="wedding-season">
     Summer 2024
    </p>
    <p class="wedding-detail">
     200 Guests • Vineyard Ceremony
    </p>
   </div>
  </div>
 </div>
 <div class="gallery-item vertical">
  <div class="gallery-image">
   <img alt="First dance" src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800"/>
   <div class="gallery-overlay">
    <h3>
     Sarah & Michael
    </h3>
    <p class="wedding-season">
     Fall 2024
    </p>
    <p class="wedding-detail">
     150 Guests • Barn Reception
    </p>
   </div>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-row {
    display: grid;
    gap: 30px;
}
.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image {
        height: 300px !important;
    }
.row-1 {
    grid-template-columns: 2fr 1fr;
}
.vertical .gallery-image {
    height: 500px;
}
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-row {
        grid-template-columns: 1fr !important;
    }
.gallery-row.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-row.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-row.row-3 {
    grid-template-columns: 1fr 2fr 0.8fr;
}
.gallery-image {
    height: 380px;
}
.large-feature .gallery-image {
    height: 500px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-row.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Item Large Feature

GALLERIES html> comp-505

A galleries component containing images. Contains 6 child elements.

Emma & James

Summer 2024

200 Guests • Vineyard Ceremony

...

HTML

<div class="gallery-item large-feature">
 <div class="gallery-image">
  <img alt="Summer wedding" src="https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1200"/>
  <div class="gallery-overlay">
   <h3>
    Emma & James
   </h3>
   <p class="wedding-season">
    Summer 2024
   </p>
   <p class="wedding-detail">
    200 Guests • Vineyard Ceremony
   </p>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 380px;
}
.large-feature .gallery-image {
    height: 500px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Image

GALLERIES html> comp-506

A galleries component containing images. Contains 5 child elements.

Emma & James

Summer 2024

200 Guests • Vineyard Ceremony

...

HTML

<div class="gallery-image">
 <img alt="Summer wedding" src="https://images.unsplash.com/photo-1606800052052-a08af7148866?w=1200"/>
 <div class="gallery-overlay">
  <h3>
   Emma & James
  </h3>
  <p class="wedding-season">
   Summer 2024
  </p>
  <p class="wedding-detail">
   200 Guests • Vineyard Ceremony
  </p>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-image {
        height: 300px !important;
    }
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-image {
    height: 500px;
}
.gallery-image {
    height: 380px;
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Overlay

GALLERIES html> comp-507

A galleries component. Contains 3 child elements.

Emma & James

Summer 2024

200 Guests • Vineyard Ceremony

...

HTML

<div class="gallery-overlay">
 <h3>
  Emma & James
 </h3>
 <p class="wedding-season">
  Summer 2024
 </p>
 <p class="wedding-detail">
  200 Guests • Vineyard Ceremony
 </p>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

Galleries - Gallery Item Vertical

GALLERIES html> comp-508

A galleries component containing images. Contains 6 child elements.

Sarah & Michael

Fall 2024

150 Guests • Barn Reception

...

HTML

<div class="gallery-item vertical">
 <div class="gallery-image">
  <img alt="First dance" src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800"/>
  <div class="gallery-overlay">
   <h3>
    Sarah & Michael
   </h3>
   <p class="wedding-season">
    Fall 2024
   </p>
   <p class="wedding-detail">
    150 Guests • Barn Reception
   </p>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-image {
        height: 300px !important;
    }
.vertical .gallery-image {
    height: 500px;
}
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 380px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Image

GALLERIES html> comp-509

A galleries component containing images. Contains 5 child elements.

Sarah & Michael

Fall 2024

150 Guests • Barn Reception

...

HTML

<div class="gallery-image">
 <img alt="First dance" src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?w=800"/>
 <div class="gallery-overlay">
  <h3>
   Sarah & Michael
  </h3>
  <p class="wedding-season">
   Fall 2024
  </p>
  <p class="wedding-detail">
   150 Guests • Barn Reception
  </p>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-image {
        height: 300px !important;
    }
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-image {
    height: 500px;
}
.gallery-image {
    height: 380px;
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Overlay

GALLERIES html> comp-510

A galleries component. Contains 3 child elements.

Sarah & Michael

Fall 2024

150 Guests • Barn Reception

...

HTML

<div class="gallery-overlay">
 <h3>
  Sarah & Michael
 </h3>
 <p class="wedding-season">
  Fall 2024
 </p>
 <p class="wedding-detail">
  150 Guests • Barn Reception
 </p>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

Galleries - Gallery Row Row 2

GALLERIES html> comp-511

A galleries component containing images. Contains 14 child elements.

Rachel & David

Spring 2024

100 Guests • Forest Ceremony

HTML

<div class="gallery-row row-2">
 <div class="gallery-item medium">
  <div class="gallery-image">
   <img alt="Outdoor ceremony" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
   <div class="gallery-overlay">
    <h3>
     Rachel & David
    </h3>
    <p class="wedding-season">
     Spring 2024
    </p>
    <p class="wedding-detail">
     100 Guests • Forest Ceremony
    </p>
   </div>
  </div>
 </div>
 <div class="gallery-item horizontal">
  <div class="gallery-image">
   <img alt="Golden hour" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1000"/>
   <div class="gallery-overlay">
    <h3>
     Jessica & Ryan
    </h3>
    <p class="wedding-season">
     Summer 2024
    </p>
    <p class="wedding-detail">
     175 Guests • Sunset Reception
    </p>
   </div>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.horizontal .gallery-image {
    height: 380px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-row {
    display: grid;
    gap: 30px;
}
.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-row {
        grid-template-columns: 1fr !important;
    }
.gallery-row.row-1,
    .gallery-component .gallery-row.row-2,
    .gallery-component .gallery-row.row-3 {
        grid-template-columns: 1fr 1fr;
    }
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-row.row-2 {
    grid-template-columns: 1fr 1.5fr;
}
.gallery-row.row-3 {
    grid-template-columns: 1fr 2fr 0.8fr;
}
.gallery-image {
    height: 380px;
}
.medium .gallery-image {
    height: 380px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-row.row-1 {
    grid-template-columns: 2fr 1fr;
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Item Medium

GALLERIES html> comp-512

A galleries component containing images. Contains 6 child elements.

Rachel & David

Spring 2024

100 Guests • Forest Ceremony

...

HTML

<div class="gallery-item medium">
 <div class="gallery-image">
  <img alt="Outdoor ceremony" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
  <div class="gallery-overlay">
   <h3>
    Rachel & David
   </h3>
   <p class="wedding-season">
    Spring 2024
   </p>
   <p class="wedding-detail">
    100 Guests • Forest Ceremony
   </p>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 380px;
}
.medium .gallery-image {
    height: 380px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Image

GALLERIES html> comp-513

A galleries component containing images. Contains 5 child elements.

Rachel & David

Spring 2024

100 Guests • Forest Ceremony

...

HTML

<div class="gallery-image">
 <img alt="Outdoor ceremony" src="https://images.unsplash.com/photo-1519741497674-611481863552?w=800"/>
 <div class="gallery-overlay">
  <h3>
   Rachel & David
  </h3>
  <p class="wedding-season">
   Spring 2024
  </p>
  <p class="wedding-detail">
   100 Guests • Forest Ceremony
  </p>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-image {
        height: 300px !important;
    }
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-image {
    height: 500px;
}
.gallery-image {
    height: 380px;
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Overlay

GALLERIES html> comp-514

A galleries component. Contains 3 child elements.

Rachel & David

Spring 2024

100 Guests • Forest Ceremony

...

HTML

<div class="gallery-overlay">
 <h3>
  Rachel & David
 </h3>
 <p class="wedding-season">
  Spring 2024
 </p>
 <p class="wedding-detail">
  100 Guests • Forest Ceremony
 </p>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

Galleries - Gallery Item Horizontal

GALLERIES html> comp-515

A galleries component containing images. Contains 6 child elements.

Jessica & Ryan

Summer 2024

175 Guests • Sunset Reception

...

HTML

<div class="gallery-item horizontal">
 <div class="gallery-image">
  <img alt="Golden hour" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1000"/>
  <div class="gallery-overlay">
   <h3>
    Jessica & Ryan
   </h3>
   <p class="wedding-season">
    Summer 2024
   </p>
   <p class="wedding-detail">
    175 Guests • Sunset Reception
   </p>
  </div>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.horizontal .gallery-image {
    height: 380px;
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-item.horizontal .gallery-image {
    height: 380px;
}
.gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 500px;
}
.gallery-item.medium .gallery-image {
    height: 380px;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    z-index: 10;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}
.gallery-item.large-feature .gallery-image {
    height: 500px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}
.gallery-item.vertical .gallery-image {
    height: 500px;
}
.gallery-item .gallery-image {
        height: 300px !important;
    }
.gallery-image {
    height: 380px;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-item:hover .gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Image

GALLERIES html> comp-516

A galleries component containing images. Contains 5 child elements.

Jessica & Ryan

Summer 2024

175 Guests • Sunset Reception

...

HTML

<div class="gallery-image">
 <img alt="Golden hour" src="https://images.unsplash.com/photo-1583939003579-730e3918a45a?w=1000"/>
 <div class="gallery-overlay">
  <h3>
   Jessica & Ryan
  </h3>
  <p class="wedding-season">
   Summer 2024
  </p>
  <p class="wedding-detail">
   175 Guests • Sunset Reception
  </p>
 </div>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gallery-dark);
}
.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.gallery-image {
        height: 300px !important;
    }
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}
.gallery-image {
    height: 500px;
}
.gallery-image {
    height: 380px;
}
.gallery-image img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

Galleries - Gallery Overlay

GALLERIES html> comp-517

A galleries component. Contains 3 child elements.

Jessica & Ryan

Summer 2024

175 Guests • Sunset Reception

...

HTML

<div class="gallery-overlay">
 <h3>
  Jessica & Ryan
 </h3>
 <p class="wedding-season">
  Summer 2024
 </p>
 <p class="wedding-detail">
  175 Guests • Sunset Reception
 </p>
</div>

CSS

.wedding-season {
    font-size: 14px;
    color: var(--gallery-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(44, 36, 22, 0) 0%, 
        rgba(44, 36, 22, 0.2) 50%, 
        rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.gallery-overlay h3 {
    transform: translateY(0);
}
.gallery-overlay {
    opacity: 1;
}
.wedding-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.gallery-overlay h3 {
    font-size: 32px;
    color: white;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

Galleries - Packages Grid

GALLERIES html> comp-518

A galleries component containing buttons. Contains 37 child elements.

Intimate

$3,500 / up to 75 guests

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens

Bridal suite access

HTML

<div class="packages-grid">
 <div class="package-card">
  <div class="package-header">
   <h3 class="package-name">
    Intimate
   </h3>
   <div class="package-price">
    $3,500
    <span>
     / up to 75 guests
    </span>
   </div>
  </div>
  <div class="package-body">
   <ul class="package-features">
    <li>
     6-hour venue rental
    </li>
    <li>
     Ceremony & reception spaces
    </li>
    <li>
     Tables, chairs & linens
    </li>
    <li>
     Bridal suite access
    </li>
   </ul>
   <button class="package-btn">
    Learn More
   </button>
  </div>
 </div>
 <div class="package-card featured">
  <div class="package-header">
   <h3 class="package-name">
    Classic
   </h3>
   <div class="package-price">
    $5,500
    <span>
     / up to 150 guests
    </span>
   </div>
  </div>
  <div class="package-body">
   <ul class="package-features">
    <li>
     10-hour venue rental
    </li>
    <li>
     Full property access
    </li>
    <li>
     Premium décor package
    </li>
    <li>
     Both suites included
    </li>
    <li>
     Complimentary rehearsal
    </li>
   </ul>
   <button class="package-btn">
    Most Popular Choice
   </button>
  </div>
 </div>
 <div class="package-card">
  <div class="package-header">
   <h3 class="package-name">
    Grand
   </h3>
   <div class="package-price">
    $8,500
    <span>
     / up to 300 guests
    </span>
   </div>
  </div>
  <div class="package-body">
   <ul class="package-features">
    <li>
     Full weekend rental
    </li>
    <li>
     All venue spaces
    </li>
    <li>
     Luxury décor collection
    </li>
    <li>
     Golf cart transportation
    </li>
   </ul>
   <button class="package-btn">
    Ultimate Experience
   </button>
  </div>
 </div>
</div>

CSS

.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.package-body {
    padding: 40px 30px;
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}
.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.packages-grid {
        grid-template-columns: 1fr;
    }
.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.featured-post .blog-content {
    padding: 40px;
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

Galleries - Blog Grid

GALLERIES html> comp-519

A galleries component containing images, links. Contains 28 child elements.

Featured Story

October 15, 2024 5 min read

A Magical Fall Wedding: Sarah & Tom

HTML

<div class="blog-grid">
 <article class="featured-post">
  <div class="blog-image">
   <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=800"/>
   <span class="blog-category">
    Featured Story
   </span>
  </div>
  <div class="blog-content">
   <div class="blog-meta">
    <span>
     October 15, 2024
    </span>
    <span>
     5 min read
    </span>
   </div>
   <h3 class="blog-title">
    A Magical Fall Wedding: Sarah & Tom
   </h3>
   <p class="blog-excerpt">
    When autumn leaves created natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic.
   </p>
   <a class="read-more" href="#">
    Read Story
   </a>
  </div>
 </article>
 <div class="side-posts">
  <article class="side-post">
   <div class="thumb">
    <img alt="Planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=300"/>
   </div>
   <div class="content">
    <span class="blog-category">
     Planning Tips
    </span>
    <h3 class="blog-title">
     10 Ways to Personalize Your Barn Wedding
    </h3>
    <div class="blog-meta">
     <span>
      October 10, 2024
     </span>
    </div>
   </div>
  </article>
  <article class="side-post">
   <div class="thumb">
    <img alt="Summer" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=300"/>
   </div>
   <div class="content">
    <span class="blog-category">
     Seasonal Guide
    </span>
    <h3 class="blog-title">
     Why Minnesota Summers Make Perfect Weddings
    </h3>
    <div class="blog-meta">
     <span>
      October 5, 2024
     </span>
    </div>
   </div>
  </article>
 </div>
</div>

CSS

.blog-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}
.read-more:hover {
    color: var(--blog-primary);
}
.blog-image {
    height: 200px;
    filter: brightness(0.8);
    transition: filter 0.4s ease;
    overflow: hidden;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-excerpt {
    color: var(--blog-brown);
    line-height: 1.8;
    margin-bottom: 25px;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.read-more:hover::after {
    transform: translateX(5px);
}
.blog-grid,
    .blog-dark .blog-grid {
        grid-template-columns: 1fr;
    }
.blog-image {
    filter: brightness(1);
}
.side-post .content {
    flex: 1;
}
.side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-content {
    padding: 30px;
}
.blog-excerpt {
    color: white;
}
.read-more {
    color: var(--blog-accent);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}
.side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more {
    color: var(--blog-accent);
}
.side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.featured-post .blog-content {
    padding: 40px;
}
.blog-image img {
    transform: scale(1.05);
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.content {
    flex: 1;
}
.blog-content {
    padding: 40px;
}

Galleries - Testimonials Grid

GALLERIES html> comp-520

A galleries component containing images. Contains 45 child elements.

"

★ ★ ★ ★ ★

The Rum River Barn exceeded every expectation. The rustic charm combined with modern amenities created the perfect atmosphere f...

HTML

<div class="testimonials-grid">
 <div class="testimonial-card">
  <span class="quote-mark">
   "
  </span>
  <div class="rating">
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
  </div>
  <p class="testimonial-text">
   The Rum River Barn exceeded every expectation. The rustic charm combined with modern amenities created the perfect atmosphere for our special day.
  </p>
  <div class="testimonial-author">
   <div class="author-image">
    <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
   </div>
   <div class="author-info">
    <h4>
     Sarah & Michael
    </h4>
    <p class="wedding-date">
     Married June 2024
    </p>
   </div>
  </div>
 </div>
 <div class="testimonial-card">
  <span class="quote-mark">
   "
  </span>
  <div class="rating">
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
  </div>
  <p class="testimonial-text">
   From the vineyard ceremony to the barn reception, every moment was magical. The staff went above and beyond to make our day perfect.
  </p>
  <div class="testimonial-author">
   <div class="author-image">
    <img alt="Emily" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150"/>
   </div>
   <div class="author-info">
    <h4>
     Emily & James
    </h4>
    <p class="wedding-date">
     Married September 2024
    </p>
   </div>
  </div>
 </div>
 <div class="testimonial-card">
  <span class="quote-mark">
   "
  </span>
  <div class="rating">
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
   <span class="star">
    ★
   </span>
  </div>
  <p class="testimonial-text">
   The venue's natural beauty required minimal decoration. Our guests are still talking about how stunning everything was!
  </p>
  <div class="testimonial-author">
   <div class="author-image">
    <img alt="Rachel" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150"/>
   </div>
   <div class="author-info">
    <h4>
     Rachel & David
    </h4>
    <p class="wedding-date">
     Married May 2024
    </p>
   </div>
  </div>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.star {
    color: var(--test-accent);
    font-size: 20px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.testimonials-grid {
        grid-template-columns: 1fr;
    }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Services Cards

CARDS html> comp-521

A cards component containing images. Contains 18 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access and customizable packages.

...

HTML

<div class="services-cards">
 <div class="service-card">
  <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $5,000
   </span>
   <h3 class="service-title">
    Weddings
   </h3>
   <p class="service-description">
    Your perfect day deserves the perfect setting. Full venue access and customizable packages.
   </p>
  </div>
 </div>
 <div class="service-card">
  <img alt="Corporate" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $2,000
   </span>
   <h3 class="service-title">
    Corporate Events
   </h3>
   <p class="service-description">
    Inspire your team in a setting that sparks creativity and collaboration.
   </p>
  </div>
 </div>
 <div class="service-card">
  <img alt="Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
  <div class="service-overlay">
   <span class="service-price">
    From $1,500
   </span>
   <h3 class="service-title">
    Celebrations
   </h3>
   <p class="service-description">
    Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.
   </p>
  </div>
 </div>
</div>

CSS

.service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-card:hover .service-bg {
    transform: scale(1.1);
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.services-cards {
        grid-template-columns: 1fr;
    }
.service-bg {
    transform: scale(1.1);
}
.service-title {
    transform: translateY(-10px);
}
.service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.services-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Service Card

CARDS html> comp-522

A cards component containing images. Contains 5 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access and customizable packages.

...

HTML

<div class="service-card">
 <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $5,000
  </span>
  <h3 class="service-title">
   Weddings
  </h3>
  <p class="service-description">
   Your perfect day deserves the perfect setting. Full venue access and customizable packages.
  </p>
 </div>
</div>

CSS

.service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-card:hover .service-bg {
    transform: scale(1.1);
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-bg {
    transform: scale(1.1);
}
.service-title {
    transform: translateY(-10px);
}
.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Service Card

CARDS html> comp-523

A cards component containing images. Contains 5 child elements.

From $2,000

Corporate Events

Inspire your team in a setting that sparks creativity and collaboration.

...

HTML

<div class="service-card">
 <img alt="Corporate" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $2,000
  </span>
  <h3 class="service-title">
   Corporate Events
  </h3>
  <p class="service-description">
   Inspire your team in a setting that sparks creativity and collaboration.
  </p>
 </div>
</div>

CSS

.service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-card:hover .service-bg {
    transform: scale(1.1);
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-bg {
    transform: scale(1.1);
}
.service-title {
    transform: translateY(-10px);
}
.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Service Card

CARDS html> comp-524

A cards component containing images. Contains 5 child elements.

From $1,500

Celebrations

Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.

...

HTML

<div class="service-card">
 <img alt="Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
 <div class="service-overlay">
  <span class="service-price">
   From $1,500
  </span>
  <h3 class="service-title">
   Celebrations
  </h3>
  <p class="service-description">
   Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.
  </p>
 </div>
</div>

CSS

.service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-card:hover .service-bg {
    transform: scale(1.1);
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-bg {
    transform: scale(1.1);
}
.service-title {
    transform: translateY(-10px);
}
.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Package Card

CARDS html> comp-525

A cards component containing buttons. Contains 11 child elements.

Intimate

$3,500 / up to 75 guests

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens
Bridal suite access

HTML

<div class="package-card">
 <div class="package-header">
  <h3 class="package-name">
   Intimate
  </h3>
  <div class="package-price">
   $3,500
   <span>
    / up to 75 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    6-hour venue rental
   </li>
   <li>
    Ceremony & reception spaces
   </li>
   <li>
    Tables, chairs & linens
   </li>
   <li>
    Bridal suite access
   </li>
  </ul>
  <button class="package-btn">
   Learn More
  </button>
 </div>
</div>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-body {
    padding: 40px 30px;
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}

Cards - Package Card Featured

CARDS html> comp-526

A cards component containing buttons. Contains 12 child elements.

Classic

$5,500 / up to 150 guests

10-hour venue rental
Full property access
Premium décor package
Both suites included
Complimentary rehearsal

HTML

<div class="package-card featured">
 <div class="package-header">
  <h3 class="package-name">
   Classic
  </h3>
  <div class="package-price">
   $5,500
   <span>
    / up to 150 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    10-hour venue rental
   </li>
   <li>
    Full property access
   </li>
   <li>
    Premium décor package
   </li>
   <li>
    Both suites included
   </li>
   <li>
    Complimentary rehearsal
   </li>
  </ul>
  <button class="package-btn">
   Most Popular Choice
  </button>
 </div>
</div>

CSS

.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.package-body {
    padding: 40px 30px;
}
.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.featured-post .blog-content {
    padding: 40px;
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

Cards - Package Card

CARDS html> comp-527

A cards component containing buttons. Contains 11 child elements.

Grand

$8,500 / up to 300 guests

Full weekend rental
All venue spaces
Luxury décor collection
Golf cart transportation

<div class="package-card">
 <div class="package-header">
  <h3 class="package-name">
   Grand
  </h3>
  <div class="package-price">
   $8,500
   <span>
    / up to 300 guests
   </span>
  </div>
 </div>
 <div class="package-body">
  <ul class="package-features">
   <li>
    Full weekend rental
   </li>
   <li>
    All venue spaces
   </li>
   <li>
    Luxury décor collection
   </li>
   <li>
    Golf cart transportation
   </li>
  </ul>
  <button class="package-btn">
   Ultimate Experience
  </button>
 </div>
</div>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-body {
    padding: 40px 30px;
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}

Cards - Testimonial Card

CARDS html> comp-528

A cards component containing images. Contains 14 child elements.

"

★ ★ ★ ★ ★

The Rum River Barn exceeded every expectation. The rustic charm combined with modern amenities created the perfect atmosphere for our special day.

HTML

<div class="testimonial-card">
 <span class="quote-mark">
  "
 </span>
 <div class="rating">
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
 </div>
 <p class="testimonial-text">
  The Rum River Barn exceeded every expectation. The rustic charm combined with modern amenities created the perfect atmosphere for our special day.
 </p>
 <div class="testimonial-author">
  <div class="author-image">
   <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
  </div>
  <div class="author-info">
   <h4>
    Sarah & Michael
   </h4>
   <p class="wedding-date">
    Married June 2024
   </p>
  </div>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.star {
    color: var(--test-accent);
    font-size: 20px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Cards - Testimonial Card

CARDS html> comp-529

A cards component containing images. Contains 14 child elements.

"

★ ★ ★ ★ ★

From the vineyard ceremony to the barn reception, every moment was magical. The staff went above and beyond to make our day perfect.

HTML

<div class="testimonial-card">
 <span class="quote-mark">
  "
 </span>
 <div class="rating">
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
 </div>
 <p class="testimonial-text">
  From the vineyard ceremony to the barn reception, every moment was magical. The staff went above and beyond to make our day perfect.
 </p>
 <div class="testimonial-author">
  <div class="author-image">
   <img alt="Emily" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150"/>
  </div>
  <div class="author-info">
   <h4>
    Emily & James
   </h4>
   <p class="wedding-date">
    Married September 2024
   </p>
  </div>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.star {
    color: var(--test-accent);
    font-size: 20px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Cards - Testimonial Card

CARDS html> comp-530

A cards component containing images. Contains 14 child elements.

"

★ ★ ★ ★ ★

The venue's natural beauty required minimal decoration. Our guests are still talking about how stunning everything was!

HTML

<div class="testimonial-card">
 <span class="quote-mark">
  "
 </span>
 <div class="rating">
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
  <span class="star">
   ★
  </span>
 </div>
 <p class="testimonial-text">
  The venue's natural beauty required minimal decoration. Our guests are still talking about how stunning everything was!
 </p>
 <div class="testimonial-author">
  <div class="author-image">
   <img alt="Rachel" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150"/>
  </div>
  <div class="author-info">
   <h4>
    Rachel & David
   </h4>
   <p class="wedding-date">
    Married May 2024
   </p>
  </div>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.star {
    color: var(--test-accent);
    font-size: 20px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Cards - Services Component

CARDS html> comp-531

A cards component containing images. Contains 23 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations

From $5,0...

HTML

<section class="services-component">
 <div class="services-container">
  <div class="services-header">
   <h2>
    Celebrate Every Moment
   </h2>
   <p class="subtitle">
    From intimate gatherings to grand celebrations
   </p>
  </div>
  <div class="services-cards">
   <div class="service-card">
    <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $5,000
     </span>
     <h3 class="service-title">
      Weddings
     </h3>
     <p class="service-description">
      Your perfect day deserves the perfect setting. Full venue access and customizable packages.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Corporate" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $2,000
     </span>
     <h3 class="service-title">
      Corporate Events
     </h3>
     <p class="service-description">
      Inspire your team in a setting that sparks creativity and collaboration.
     </p>
    </div>
   </div>
   <div class="service-card">
    <img alt="Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
    <div class="service-overlay">
     <span class="service-price">
      From $1,500
     </span>
     <h3 class="service-title">
      Celebrations
     </h3>
     <p class="service-description">
      Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.
     </p>
    </div>
   </div>
  </div>
 </div>
</section>

CSS

.services-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.services-component .services-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.services-component .services-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.services-component .service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.services-header h2 {
    font-size: 48px;
    color: var(--services-dark);
    margin-bottom: 20px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.service-title {
    transform: translateY(-10px);
}
.services-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.services-component .services-cards {
        grid-template-columns: 1fr;
    }
.services-component .service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.services-cards {
        grid-template-columns: 1fr;
    }
.service-bg {
    transform: scale(1.1);
}
.services-component .service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.services-component .services-header .subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header {
    text-align: center;
    margin-bottom: 80px;
}
.services-component .service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.services-component .service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.services-component .service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header .subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-component .service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}
.services-component {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--services-cream) 0%, white 100%);
    position: relative;
}
.services-component {
    --services-primary: #8B6337;
    --services-accent: #D4A574;
    --services-cream: #FAF6F2;
    --services-dark: #2C2416;
    --services-light: #6B5D54;
}
.services-component .services-header {
    text-align: center;
    margin-bottom: 80px;
}
.services-component .service-card:hover .service-bg {
    transform: scale(1.1);
}
.services-component .service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-card:hover .service-bg {
    transform: scale(1.1);
}
.service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.services-component .service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}
.services-component .services-header h2 {
    font-size: 48px;
    color: var(--services-dark);
    margin-bottom: 20px;
}
.subtitle {
    color: white;
}

Cards - Services Container

CARDS html> comp-532

A cards component containing images. Contains 22 child elements.

Celebrate Every Moment

From intimate gatherings to grand celebrations

From $5,000

W...

HTML

<div class="services-container">
 <div class="services-header">
  <h2>
   Celebrate Every Moment
  </h2>
  <p class="subtitle">
   From intimate gatherings to grand celebrations
  </p>
 </div>
 <div class="services-cards">
  <div class="service-card">
   <img alt="Wedding" class="service-bg" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=600"/>
   <div class="service-overlay">
    <span class="service-price">
     From $5,000
    </span>
    <h3 class="service-title">
     Weddings
    </h3>
    <p class="service-description">
     Your perfect day deserves the perfect setting. Full venue access and customizable packages.
    </p>
   </div>
  </div>
  <div class="service-card">
   <img alt="Corporate" class="service-bg" src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=600"/>
   <div class="service-overlay">
    <span class="service-price">
     From $2,000
    </span>
    <h3 class="service-title">
     Corporate Events
    </h3>
    <p class="service-description">
     Inspire your team in a setting that sparks creativity and collaboration.
    </p>
   </div>
  </div>
  <div class="service-card">
   <img alt="Celebration" class="service-bg" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?w=600"/>
   <div class="service-overlay">
    <span class="service-price">
     From $1,500
    </span>
    <h3 class="service-title">
     Celebrations
    </h3>
    <p class="service-description">
     Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.
    </p>
   </div>
  </div>
 </div>
</div>

CSS

.services-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.services-header h2 {
    font-size: 48px;
    color: var(--services-dark);
    margin-bottom: 20px;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.service-title {
    transform: translateY(-10px);
}
.service-card:hover .service-description {
    opacity: 1;
    transform: translateY(0);
}
.services-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.service-card:hover .service-title {
    transform: translateY(-10px);
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.services-cards {
        grid-template-columns: 1fr;
    }
.service-bg {
    transform: scale(1.1);
}
.service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.services-header {
    text-align: center;
    margin-bottom: 80px;
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.services-header .subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-card:hover .service-bg {
    transform: scale(1.1);
}
.service-card:hover .service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.subtitle {
    color: white;
}

Cards - Service Overlay

CARDS html> comp-536

A cards component. Contains 3 child elements.

From $5,000

Weddings

Your perfect day deserves the perfect setting. Full venue access and customizable packages.

...

HTML

<div class="service-overlay">
 <span class="service-price">
  From $5,000
 </span>
 <h3 class="service-title">
  Weddings
 </h3>
 <p class="service-description">
  Your perfect day deserves the perfect setting. Full venue access and customizable packages.
 </p>
</div>

CSS

.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-title {
    transform: translateY(-10px);
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Service Overlay

CARDS html> comp-538

A cards component. Contains 3 child elements.

From $2,000

Corporate Events

Inspire your team in a setting that sparks creativity and collaboration.

...

HTML

<div class="service-overlay">
 <span class="service-price">
  From $2,000
 </span>
 <h3 class="service-title">
  Corporate Events
 </h3>
 <p class="service-description">
  Inspire your team in a setting that sparks creativity and collaboration.
 </p>
</div>

CSS

.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-title {
    transform: translateY(-10px);
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Service Overlay

CARDS html> comp-540

A cards component. Contains 3 child elements.

From $1,500

Celebrations

Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.

...

HTML

<div class="service-overlay">
 <span class="service-price">
  From $1,500
 </span>
 <h3 class="service-title">
  Celebrations
 </h3>
 <p class="service-description">
  Birthdays, anniversaries, reunions—every milestone deserves a spectacular venue.
 </p>
</div>

CSS

.service-price {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--services-accent);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
}
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.3) 0%, rgba(44, 36, 22, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: background 0.4s ease;
}
.service-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.service-overlay {
    background: linear-gradient(180deg, rgba(44, 36, 22, 0.7) 0%, rgba(44, 36, 22, 0.95) 100%);
}
.service-description {
    opacity: 1;
    transform: translateY(0);
}
.service-title {
    transform: translateY(-10px);
}
.service-title {
    font-size: 32px;
    color: white;
    margin-bottom: 15px;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

Cards - Packages Component

CARDS html> comp-541

A cards component containing buttons. Contains 42 child elements.

Investment in Memories

Wedding Packages

Intimate

$3,500 / up to 75 guests

HTML

<section class="packages-component">
 <div class="packages-container">
  <div class="packages-header">
   <p class="script-font">
    Investment in Memories
   </p>
   <h2>
    Wedding Packages
   </h2>
  </div>
  <div class="packages-grid">
   <div class="package-card">
    <div class="package-header">
     <h3 class="package-name">
      Intimate
     </h3>
     <div class="package-price">
      $3,500
      <span>
       / up to 75 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       6-hour venue rental
      </li>
      <li>
       Ceremony & reception spaces
      </li>
      <li>
       Tables, chairs & linens
      </li>
      <li>
       Bridal suite access
      </li>
     </ul>
     <button class="package-btn">
      Learn More
     </button>
    </div>
   </div>
   <div class="package-card featured">
    <div class="package-header">
     <h3 class="package-name">
      Classic
     </h3>
     <div class="package-price">
      $5,500
      <span>
       / up to 150 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       10-hour venue rental
      </li>
      <li>
       Full property access
      </li>
      <li>
       Premium décor package
      </li>
      <li>
       Both suites included
      </li>
      <li>
       Complimentary rehearsal
      </li>
     </ul>
     <button class="package-btn">
      Most Popular Choice
     </button>
    </div>
   </div>
   <div class="package-card">
    <div class="package-header">
     <h3 class="package-name">
      Grand
     </h3>
     <div class="package-price">
      $8,500
      <span>
       / up to 300 guests
      </span>
     </div>
    </div>
    <div class="package-body">
     <ul class="package-features">
      <li>
       Full weekend rental
      </li>
      <li>
       All venue spaces
      </li>
      <li>
       Luxury décor collection
      </li>
      <li>
       Golf cart transportation
      </li>
     </ul>
     <button class="package-btn">
      Ultimate Experience
     </button>
    </div>
   </div>
  </div>
 </div>
</section>

CSS

.packages-component .package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.packages-component .package-body {
    padding: 40px 30px;
}
.script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.packages-component .packages-grid {
        grid-template-columns: 1fr;
    }
.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.packages-component .package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.packages-component .packages-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.packages-component .package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.packages-component .package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.packages-component .package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.packages-component .script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.packages-component .package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.packages-component {
    --pkg-primary: #8B6337;
    --pkg-accent: #D4A574;
    --pkg-cream: #FAF6F2;
    --pkg-dark: #2C2416;
    --pkg-wine: #722F37;
    --pkg-white: #FEFDFB;
}
.package-body {
    padding: 40px 30px;
}
.packages-component .package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}
.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.packages-component .package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.packages-component {
    padding: 120px 0;
    background: linear-gradient(135deg, var(--pkg-white) 0%, var(--pkg-cream) 100%);
}
.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.packages-component .packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}
.packages-component .package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.packages-component .package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.packages-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.packages-component .package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.packages-component .package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.packages-component .package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.packages-component h2 {
    font-size: 48px;
    color: var(--pkg-dark);
    margin-bottom: 20px;
}
.packages-grid {
        grid-template-columns: 1fr;
    }
.packages-component .package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.featured-post .blog-content {
    padding: 40px;
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.packages-header {
    text-align: center;
    margin-bottom: 80px;
}
.packages-component .packages-header {
    text-align: center;
    margin-bottom: 80px;
}

Cards - Packages Container

CARDS html> comp-542

A cards component containing buttons. Contains 41 child elements.

Investment in Memories

Wedding Packages

Intimate

$3,500 / up to 75 guests

...

HTML

<div class="packages-container">
 <div class="packages-header">
  <p class="script-font">
   Investment in Memories
  </p>
  <h2>
   Wedding Packages
  </h2>
 </div>
 <div class="packages-grid">
  <div class="package-card">
   <div class="package-header">
    <h3 class="package-name">
     Intimate
    </h3>
    <div class="package-price">
     $3,500
     <span>
      / up to 75 guests
     </span>
    </div>
   </div>
   <div class="package-body">
    <ul class="package-features">
     <li>
      6-hour venue rental
     </li>
     <li>
      Ceremony & reception spaces
     </li>
     <li>
      Tables, chairs & linens
     </li>
     <li>
      Bridal suite access
     </li>
    </ul>
    <button class="package-btn">
     Learn More
    </button>
   </div>
  </div>
  <div class="package-card featured">
   <div class="package-header">
    <h3 class="package-name">
     Classic
    </h3>
    <div class="package-price">
     $5,500
     <span>
      / up to 150 guests
     </span>
    </div>
   </div>
   <div class="package-body">
    <ul class="package-features">
     <li>
      10-hour venue rental
     </li>
     <li>
      Full property access
     </li>
     <li>
      Premium décor package
     </li>
     <li>
      Both suites included
     </li>
     <li>
      Complimentary rehearsal
     </li>
    </ul>
    <button class="package-btn">
     Most Popular Choice
    </button>
   </div>
  </div>
  <div class="package-card">
   <div class="package-header">
    <h3 class="package-name">
     Grand
    </h3>
    <div class="package-price">
     $8,500
     <span>
      / up to 300 guests
     </span>
    </div>
   </div>
   <div class="package-body">
    <ul class="package-features">
     <li>
      Full weekend rental
     </li>
     <li>
      All venue spaces
     </li>
     <li>
      Luxury décor collection
     </li>
     <li>
      Golf cart transportation
     </li>
    </ul>
    <button class="package-btn">
     Ultimate Experience
    </button>
   </div>
  </div>
 </div>
</div>

CSS

.script-font {
    font-size: 28px;
    color: var(--pkg-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.package-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
}
.script-font {
    font-size: 32px;
    color: var(--gallery-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.package-body {
    padding: 40px 30px;
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}
.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.package-card.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-price span {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
}
.package-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--pkg-wine);
    color: white;
    padding: 8px 40px;
    transform: rotate(45deg);
    font-size: 12px;
    letter-spacing: 1px;
    z-index: 1;
}
.featured {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.package-name {
    font-size: 28px;
    margin-bottom: 10px;
}
.packages-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.packages-grid {
        grid-template-columns: 1fr;
    }
.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.package-header {
    background: linear-gradient(135deg, var(--pkg-primary) 0%, var(--pkg-dark) 100%);
    padding: 30px;
    text-align: center;
    color: white;
}
.package-price {
    font-size: 42px;
    font-weight: bold;
    color: var(--pkg-accent);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}
.featured-post .blog-content {
    padding: 40px;
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.packages-header {
    text-align: center;
    margin-bottom: 80px;
}

Cards - Package Body

CARDS html> comp-547

A cards component containing buttons. Contains 6 child elements.

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens
Bridal suite access

...

HTML

<div class="package-body">
 <ul class="package-features">
  <li>
   6-hour venue rental
  </li>
  <li>
   Ceremony & reception spaces
  </li>
  <li>
   Tables, chairs & linens
  </li>
  <li>
   Bridal suite access
  </li>
 </ul>
 <button class="package-btn">
  Learn More
 </button>
</div>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-body {
    padding: 40px 30px;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

Cards - Package Features

CARDS html> comp-548

A cards component. Contains 4 child elements.

6-hour venue rental
Ceremony & reception spaces
Tables, chairs & linens
Bridal suite access

...

HTML

<ul class="package-features">
 <li>
  6-hour venue rental
 </li>
 <li>
  Ceremony & reception spaces
 </li>
 <li>
  Tables, chairs & linens
 </li>
 <li>
  Bridal suite access
 </li>
</ul>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}

Cards - Package Body

CARDS html> comp-551

A cards component containing buttons. Contains 7 child elements.

10-hour venue rental
Full property access
Premium décor package
Both suites included
Complimentary rehearsal

...

HTML

<div class="package-body">
 <ul class="package-features">
  <li>
   10-hour venue rental
  </li>
  <li>
   Full property access
  </li>
  <li>
   Premium décor package
  </li>
  <li>
   Both suites included
  </li>
  <li>
   Complimentary rehearsal
  </li>
 </ul>
 <button class="package-btn">
  Most Popular Choice
 </button>
</div>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-body {
    padding: 40px 30px;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

Cards - Package Features

CARDS html> comp-552

A cards component. Contains 5 child elements.

10-hour venue rental
Full property access
Premium décor package
Both suites included
Complimentary rehearsal

...

HTML

<ul class="package-features">
 <li>
  10-hour venue rental
 </li>
 <li>
  Full property access
 </li>
 <li>
  Premium décor package
 </li>
 <li>
  Both suites included
 </li>
 <li>
  Complimentary rehearsal
 </li>
</ul>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}

Cards - Package Body

CARDS html> comp-555

A cards component containing buttons. Contains 6 child elements.

Full weekend rental
All venue spaces
Luxury décor collection
Golf cart transportation

...

HTML

<div class="package-body">
 <ul class="package-features">
  <li>
   Full weekend rental
  </li>
  <li>
   All venue spaces
  </li>
  <li>
   Luxury décor collection
  </li>
  <li>
   Golf cart transportation
  </li>
 </ul>
 <button class="package-btn">
  Ultimate Experience
 </button>
</div>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-btn:hover {
    background: var(--pkg-primary);
    transform: translateY(-2px);
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-body {
    padding: 40px 30px;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}
.package-btn {
    width: 100%;
    padding: 18px;
    background: var(--pkg-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

Cards - Package Features

CARDS html> comp-556

A cards component. Contains 4 child elements.

Full weekend rental
All venue spaces
Luxury décor collection
Golf cart transportation

...

HTML

<ul class="package-features">
 <li>
  Full weekend rental
 </li>
 <li>
  All venue spaces
 </li>
 <li>
  Luxury décor collection
 </li>
 <li>
  Golf cart transportation
 </li>
</ul>

CSS

.package-features li::before {
    content: '✓';
    color: var(--pkg-accent);
    font-weight: bold;
    margin-right: 15px;
    font-size: 18px;
}
.package-features {
    list-style: none;
    margin-bottom: 40px;
    padding: 0;
}
.package-features li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--pkg-dark);
    display: flex;
    align-items: center;
}

Cards - Testimonials Component

CARDS html> comp-557

A cards component containing images. Contains 50 child elements.

Love Stories

What Our Couples Say

"

★ ★ ★ ...

HTML

<section class="testimonials-component">
 <div class="testimonials-container">
  <div class="testimonials-header">
   <p class="script-text">
    Love Stories
   </p>
   <h2>
    What Our Couples Say
   </h2>
  </div>
  <div class="testimonials-grid">
   <div class="testimonial-card">
    <span class="quote-mark">
     "
    </span>
    <div class="rating">
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
    </div>
    <p class="testimonial-text">
     The Rum River Barn exceeded every expectation. The rustic charm combined with modern amenities created the perfect atmosphere for our special day.
    </p>
    <div class="testimonial-author">
     <div class="author-image">
      <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
     </div>
     <div class="author-info">
      <h4>
       Sarah & Michael
      </h4>
      <p class="wedding-date">
       Married June 2024
      </p>
     </div>
    </div>
   </div>
   <div class="testimonial-card">
    <span class="quote-mark">
     "
    </span>
    <div class="rating">
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
    </div>
    <p class="testimonial-text">
     From the vineyard ceremony to the barn reception, every moment was magical. The staff went above and beyond to make our day perfect.
    </p>
    <div class="testimonial-author">
     <div class="author-image">
      <img alt="Emily" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150"/>
     </div>
     <div class="author-info">
      <h4>
       Emily & James
      </h4>
      <p class="wedding-date">
       Married September 2024
      </p>
     </div>
    </div>
   </div>
   <div class="testimonial-card">
    <span class="quote-mark">
     "
    </span>
    <div class="rating">
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
     <span class="star">
      ★
     </span>
    </div>
    <p class="testimonial-text">
     The venue's natural beauty required minimal decoration. Our guests are still talking about how stunning everything was!
    </p>
    <div class="testimonial-author">
     <div class="author-image">
      <img alt="Rachel" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150"/>
     </div>
     <div class="author-info">
      <h4>
       Rachel & David
      </h4>
      <p class="wedding-date">
       Married May 2024
      </p>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>

CSS

.testimonials-component .author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonials-component .author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.testimonials-component .rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
.testimonials-component {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--test-cream) 0%, white 100%);
    position: relative;
}
.testimonials-component .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonials-component .testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonials-component .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.star {
    color: var(--test-accent);
    font-size: 20px;
}
.testimonials-component .testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}
.testimonials-component .testimonials-grid {
        grid-template-columns: 1fr;
    }
.script-text {
    font-size: 28px;
    color: var(--test-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.testimonials-component .author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.testimonials-component .testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.testimonials-component .script-text {
    font-size: 28px;
    color: var(--test-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.testimonials-component .testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.testimonials-component .quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.testimonials-component {
    --test-primary: #8B6337;
    --test-accent: #D4A574;
    --test-cream: #FAF6F2;
    --test-dark: #2C2416;
    --test-wine: #722F37;
}
.testimonials-component .star {
    color: var(--test-accent);
    font-size: 20px;
}
.testimonials-grid {
        grid-template-columns: 1fr;
    }
.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonials-component h2 {
    font-size: 48px;
    color: var(--test-dark);
    margin-bottom: 20px;
}
.testimonials-component .testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonials-component .testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}

Cards - Testimonials Container

CARDS html> comp-558

A cards component containing images. Contains 49 child elements.

Love Stories

What Our Couples Say

"

★ ★ ★ ★ ...

HTML

<div class="testimonials-container">
 <div class="testimonials-header">
  <p class="script-text">
   Love Stories
  </p>
  <h2>
   What Our Couples Say
  </h2>
 </div>
 <div class="testimonials-grid">
  <div class="testimonial-card">
   <span class="quote-mark">
    "
   </span>
   <div class="rating">
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
   </div>
   <p class="testimonial-text">
    The Rum River Barn exceeded every expectation. The rustic charm combined with modern amenities created the perfect atmosphere for our special day.
   </p>
   <div class="testimonial-author">
    <div class="author-image">
     <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
    </div>
    <div class="author-info">
     <h4>
      Sarah & Michael
     </h4>
     <p class="wedding-date">
      Married June 2024
     </p>
    </div>
   </div>
  </div>
  <div class="testimonial-card">
   <span class="quote-mark">
    "
   </span>
   <div class="rating">
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
   </div>
   <p class="testimonial-text">
    From the vineyard ceremony to the barn reception, every moment was magical. The staff went above and beyond to make our day perfect.
   </p>
   <div class="testimonial-author">
    <div class="author-image">
     <img alt="Emily" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150"/>
    </div>
    <div class="author-info">
     <h4>
      Emily & James
     </h4>
     <p class="wedding-date">
      Married September 2024
     </p>
    </div>
   </div>
  </div>
  <div class="testimonial-card">
   <span class="quote-mark">
    "
   </span>
   <div class="rating">
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
    <span class="star">
     ★
    </span>
   </div>
   <p class="testimonial-text">
    The venue's natural beauty required minimal decoration. Our guests are still talking about how stunning everything was!
   </p>
   <div class="testimonial-author">
    <div class="author-image">
     <img alt="Rachel" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150"/>
    </div>
    <div class="author-info">
     <h4>
      Rachel & David
     </h4>
     <p class="wedding-date">
      Married May 2024
     </p>
    </div>
   </div>
  </div>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}
.testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.4s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.star {
    color: var(--test-accent);
    font-size: 20px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}
.script-text {
    font-size: 28px;
    color: var(--test-accent);
    margin-bottom: 15px;
    font-style: italic;
}
.testimonial-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--test-dark);
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.quote-mark {
    font-size: 80px;
    color: var(--test-accent);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1;
}
.testimonials-grid {
        grid-template-columns: 1fr;
    }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Cards - Testimonial Author

CARDS html> comp-562

A cards component containing images. Contains 5 child elements.

Sarah & Michael

Married June 2024

...

HTML

<div class="testimonial-author">
 <div class="author-image">
  <img alt="Sarah" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150"/>
 </div>
 <div class="author-info">
  <h4>
   Sarah & Michael
  </h4>
  <p class="wedding-date">
   Married June 2024
  </p>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Cards - Testimonial Author

CARDS html> comp-564

A cards component containing images. Contains 5 child elements.

Emily & James

Married September 2024

...

HTML

<div class="testimonial-author">
 <div class="author-image">
  <img alt="Emily" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150"/>
 </div>
 <div class="author-info">
  <h4>
   Emily & James
  </h4>
  <p class="wedding-date">
   Married September 2024
  </p>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Cards - Testimonial Author

CARDS html> comp-566

A cards component containing images. Contains 5 child elements.

Rachel & David

Married May 2024

...

HTML

<div class="testimonial-author">
 <div class="author-image">
  <img alt="Rachel" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150"/>
 </div>
 <div class="author-info">
  <h4>
   Rachel & David
  </h4>
  <p class="wedding-date">
   Married May 2024
  </p>
 </div>
</div>

CSS

.author-info h4 {
    color: var(--test-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.author-info .wedding-date {
    color: var(--test-accent);
    font-size: 14px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

Sections - Alternating Component

SECTIONS html> comp-568

A sections component containing images, buttons, links. Contains 27 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities.

Climate-controlled comfort year-round
Original exposed beam arc...

HTML

<section class="alternating-component">
 <div class="alt-container">
  <div class="block-item">
   <div class="block-content">
    <div class="number">
     01
    </div>
    <h3>
     The Historic Barn
    </h3>
    <p>
     Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities.
    </p>
    <ul class="feature-list">
     <li>
      Climate-controlled comfort year-round
     </li>
     <li>
      Original exposed beam architecture
     </li>
     <li>
      Capacity for up to 300 guests
     </li>
    </ul>
    <a class="btn-outline" href="#">
     Explore The Barn
    </a>
   </div>
   <div class="block-image">
    <img alt="Historic barn" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
    <span class="image-badge">
     100+ Years
    </span>
   </div>
  </div>
  <div class="block-item reverse">
   <div class="block-content">
    <div class="number">
     02
    </div>
    <h3>
     Vineyard Ceremonies
    </h3>
    <p>
     Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites.
    </p>
    <ul class="feature-list">
     <li>
      Sunset ceremony perfection
     </li>
     <li>
      Natural amphitheater setting
     </li>
     <li>
      Rain backup in covered pavilion
     </li>
    </ul>
    <a class="btn-outline" href="#">
     View Ceremony Sites
    </a>
   </div>
   <div class="block-image">
    <img alt="Vineyard" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
    <span class="image-badge">
     5 Locations
    </span>
   </div>
  </div>
 </div>
</section>

CSS

.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.block-item.reverse {
    direction: rtl;
}
.block-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.alternating-component .btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.block-item.reverse .block-content {
    direction: ltr;
}
.alternating-component {
    padding: 120px 0;
    background: linear-gradient(180deg, var(--alt-dark) 0%, var(--alt-medium) 100%);
    position: relative;
}
.alternating-component h3 {
    font-size: 42px;
    margin-bottom: 25px;
    color: white;
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.alt-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.reverse {
        direction: ltr;
    }
.alternating-component .block-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }
.alternating-component .block-item.reverse .block-content {
    direction: ltr;
}
.alternating-component {
    --alt-primary: #8B6337;
    --alt-accent: #D4A574;
    --alt-dark: #2C2416;
    --alt-medium: #3D3328;
    --alt-wine: #722F37;
}
.alternating-component .alt-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.alternating-component .number {
    font-size: 80px;
    color: var(--alt-accent);
    opacity: 0.5;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}
.block-item:last-child {
    margin-bottom: 0;
}
.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.alternating-component .block-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}
.block-content {
    padding: 40px;
}
.reverse {
    direction: rtl;
}
.alternating-component .feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.block-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.image-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--alt-wine);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.block-item.reverse {
        direction: ltr;
    }
.alternating-component .block-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.alternating-component .block-item.reverse {
        direction: ltr;
    }
.number {
    font-size: 80px;
    color: var(--alt-accent);
    opacity: 0.5;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}
.block-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.alternating-component .feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.alternating-component .btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.alternating-component .block-item.reverse {
    direction: rtl;
}
.alternating-component .block-item:last-child {
    margin-bottom: 0;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.alternating-component p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.block-content {
    direction: ltr;
}
.reverse .block-content {
    direction: ltr;
}
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.alternating-component .block-content {
    padding: 40px;
}
.alternating-component .feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.block-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }
.alternating-component .image-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--alt-wine);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.alternating-component .block-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

Sections - Map Component

SECTIONS html> comp-572

A sections component. Contains 32 child elements.

Find Your Way to Forever

📍

Address

12500 Rum River Drive
Princeton, MN 55371

...

HTML

<section class="map-component">
 <div class="map-container">
  <div class="map-info">
   <h2>
    Find Your Way to Forever
   </h2>
   <div class="location-details">
    <div class="location-item">
     <div class="location-icon">
      📍
     </div>
     <div class="location-text">
      <h4>
       Address
      </h4>
      <p>
       12500 Rum River Drive
       <br/>
       Princeton, MN 55371
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      🚗
     </div>
     <div class="location-text">
      <h4>
       Easy Access From
      </h4>
      <p>
       45 min from Minneapolis
       <br/>
       30 min from St. Cloud
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      ✈️
     </div>
     <div class="location-text">
      <h4>
       Nearest Airport
      </h4>
      <p>
       Minneapolis-St. Paul International
       <br/>
       55 miles (1 hour drive)
      </p>
     </div>
    </div>
    <div class="location-item">
     <div class="location-icon">
      🏨
     </div>
     <div class="location-text">
      <h4>
       Accommodations
      </h4>
      <p>
       Partner hotels in Princeton & Milaca
       <br/>
       Group rates available
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="map-embed">
   <div class="map-placeholder">
    <p>
     Interactive Map
    </p>
    <p style="font-size: 16px; margin-top: 10px;">
     Click to view on Google Maps
    </p>
   </div>
  </div>
 </div>
</section>

CSS

.map-component .map-embed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
}
.map-component .location-details {
    margin-bottom: 40px;
}
.location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}
.map-embed {
    background: var(--map-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    position: relative;
    overflow: hidden;
}
.map-component .map-placeholder {
    position: relative;
    z-index: 1;
    text-align: center;
}
.map-component .location-item {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    color: var(--map-dark);
}
.map-component .map-info h2 {
    font-size: 42px;
    color: var(--map-dark);
    margin-bottom: 30px;
}
.map-embed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
}
.map-placeholder {
    position: relative;
    z-index: 1;
    text-align: center;
}
.location-details {
    margin-bottom: 40px;
}
.map-container {
        grid-template-columns: 1fr;
    }
.location-icon {
    width: 40px;
    height: 40px;
    background: var(--map-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}
.map-info {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}
.map-info {
        padding: 40px 20px;
    }
.map-component .location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.map-component {
    padding: 0;
    background: var(--map-cream);
    position: relative;
}
.map-component .map-embed {
    background: var(--map-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    position: relative;
    overflow: hidden;
}
.map-component .location-icon {
    width: 40px;
    height: 40px;
    background: var(--map-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}
.location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.map-component .map-info {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}
.map-component .map-info {
        padding: 40px 20px;
    }
.map-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.map-component .location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}
.map-info h2 {
    font-size: 42px;
    color: var(--map-dark);
    margin-bottom: 30px;
}
.location-item {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    color: var(--map-dark);
}
.map-component {
    --map-primary: #8B6337;
    --map-accent: #D4A574;
    --map-cream: #FAF6F2;
    --map-dark: #2C2416;
    --map-light: #6B5D54;
}
.map-component .map-container {
        grid-template-columns: 1fr;
    }
.map-component .map-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}

Sections - Blog Component Blog Magazine

SECTIONS html> comp-573

A sections component containing images, links. Contains 34 child elements.

Stories from the Barn

Wedding inspiration and real celebrations

Featur...

HTML

<section class="blog-component blog-magazine">
 <div class="blog-container">
  <div class="blog-header">
   <div>
    <h2>
     Stories from the Barn
    </h2>
    <p class="subtitle">
     Wedding inspiration and real celebrations
    </p>
   </div>
  </div>
  <div class="blog-grid">
   <article class="featured-post">
    <div class="blog-image">
     <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=800"/>
     <span class="blog-category">
      Featured Story
     </span>
    </div>
    <div class="blog-content">
     <div class="blog-meta">
      <span>
       October 15, 2024
      </span>
      <span>
       5 min read
      </span>
     </div>
     <h3 class="blog-title">
      A Magical Fall Wedding: Sarah & Tom
     </h3>
     <p class="blog-excerpt">
      When autumn leaves created natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic.
     </p>
     <a class="read-more" href="#">
      Read Story
     </a>
    </div>
   </article>
   <div class="side-posts">
    <article class="side-post">
     <div class="thumb">
      <img alt="Planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=300"/>
     </div>
     <div class="content">
      <span class="blog-category">
       Planning Tips
      </span>
      <h3 class="blog-title">
       10 Ways to Personalize Your Barn Wedding
      </h3>
      <div class="blog-meta">
       <span>
        October 10, 2024
       </span>
      </div>
     </div>
    </article>
    <article class="side-post">
     <div class="thumb">
      <img alt="Summer" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=300"/>
     </div>
     <div class="content">
      <span class="blog-category">
       Seasonal Guide
      </span>
      <h3 class="blog-title">
       Why Minnesota Summers Make Perfect Weddings
      </h3>
      <div class="blog-meta">
       <span>
        October 5, 2024
       </span>
      </div>
     </div>
    </article>
   </div>
  </div>
 </div>
</section>

CSS

.blog-magazine .blog-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}
.blog-magazine .read-more:hover::after {
    transform: translateX(5px);
}
.blog-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}
.read-more:hover {
    color: var(--blog-primary);
}
.blog-magazine .blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-image {
    height: 200px;
    filter: brightness(0.8);
    transition: filter 0.4s ease;
    overflow: hidden;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-excerpt {
    color: var(--blog-brown);
    line-height: 1.8;
    margin-bottom: 25px;
}
.blog-magazine .featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.blog-magazine .subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.blog-magazine .side-post .content {
    flex: 1;
}
.blog-magazine .featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.blog-magazine .blog-grid,
    .blog-dark .blog-grid {
        grid-template-columns: 1fr;
    }
.blog-magazine .side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.blog-magazine {
    padding: 120px 0;
    background: linear-gradient(180deg, white 0%, var(--blog-cream) 100%);
    position: relative;
}
.blog-magazine .blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}
.blog-magazine .featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.read-more:hover::after {
    transform: translateX(5px);
}
.blog-grid,
    .blog-dark .blog-grid {
        grid-template-columns: 1fr;
    }
.blog-image {
    filter: brightness(1);
}
.blog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.side-post .content {
    flex: 1;
}
.blog-magazine .side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-component {
    --blog-primary: #8B6337;
    --blog-accent: #D4A574;
    --blog-cream: #FAF6F2;
    --blog-dark: #2C2416;
    --blog-brown: #4A3426;
    --blog-sage: #7A8B7F;
    --blog-wine: #722F37;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-magazine .blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-magazine .blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-magazine .read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}
.blog-magazine .read-more {
    color: var(--blog-accent);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}
.blog-magazine .side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-content {
    padding: 30px;
}
.blog-magazine .side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-excerpt {
    color: white;
}
.blog-magazine .featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-magazine h2 {
    font-size: 48px;
    color: var(--blog-dark);
    margin-bottom: 10px;
}
.read-more {
    color: var(--blog-accent);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}
.blog-magazine .side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-magazine .blog-excerpt {
    color: var(--blog-brown);
    line-height: 1.8;
    margin-bottom: 25px;
}
.side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-magazine .featured-post .blog-content {
    padding: 40px;
}
.read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more {
    color: var(--blog-accent);
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-magazine .blog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.featured-post .blog-content {
    padding: 40px;
}
.blog-image img {
    transform: scale(1.05);
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}
.blog-magazine .read-more:hover {
    color: var(--blog-primary);
}
.blog-magazine .side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.subtitle {
    color: white;
}
.content {
    flex: 1;
}
.blog-content {
    padding: 40px;
}

Sections - Shape Divider Component

SECTIONS html> comp-575

A sections component. Contains 8 child elements.

C...

HTML

<section class="shape-divider-component">
 <!-- Top Wave Divider -->
 <div class="shape-divider top wave">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
 <h3 style="font-size: 36px; margin: 40px 0;">
  Content Area with Shape Dividers
 </h3>
 <p style="max-width: 600px; margin: 0 auto; font-size: 18px;">
  Shape dividers create smooth transitions between sections
 </p>
 <!-- Bottom Curve Divider -->
 <div class="shape-divider bottom curve">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,40 Q600,80 1200,40 L1200,120 L0,120 Z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
</section>

CSS

.shape-divider.wave svg {
    height: 50px;
}
.shape-divider.split svg {
    height: 70px;
}
.curve svg {
    height: 60px;
}
.shape-divider.top {
    top: 0;
}
.wave svg {
    height: 50px;
}
.bottom {
    bottom: 0;
}
.shape-divider.curve svg {
    height: 60px;
}
.top {
    top: 0;
}
.shape-divider.bottom {
    bottom: 0;
}
.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
}
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.shape-divider.angle svg {
    height: 40px;
}
.shape-divider-component {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #8B6337 0%, #4A3426 100%);
    color: white;
    text-align: center;
}

Sections - Section

SECTIONS html> comp-576

A sections component. Contains 5 child elements.

Angle Divider Example

...

HTML

<section style="background: #FAF6F2; padding: 80px 0; position: relative;">
 <div class="shape-divider top angle">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,0 L1200,120 L1200,0 Z" fill="#4A3426">
   </path>
  </svg>
 </div>
 <div style="text-align: center; padding: 40px;">
  <h3 style="color: #2C2416; font-size: 32px;">
   Angle Divider Example
  </h3>
 </div>
</section>

CSS

.shape-divider.wave svg {
    height: 50px;
}
.shape-divider.split svg {
    height: 70px;
}
.angle svg {
    height: 40px;
}
.shape-divider.top {
    top: 0;
}
.shape-divider.curve svg {
    height: 60px;
}
.shape-divider.bottom {
    bottom: 0;
}
.top {
    top: 0;
}
.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
}
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.shape-divider.angle svg {
    height: 40px;
}
.shape-divider-component {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #8B6337 0%, #4A3426 100%);
    color: white;
    text-align: center;
}

Sections - Section

SECTIONS html> comp-577

A sections component. Contains 5 child elements.

Split Divider Example

...

HTML

<section style="background: #2C2416; padding: 80px 0; position: relative; color: white;">
 <div class="shape-divider top split">
  <svg preserveaspectratio="none" viewbox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
   <path d="M0,0 L600,120 L1200,0 Z" fill="#FAF6F2">
   </path>
  </svg>
 </div>
 <div style="text-align: center; padding: 40px;">
  <h3 style="font-size: 32px;">
   Split Divider Example
  </h3>
 </div>
</section>

CSS

.split svg {
    height: 70px;
}
.shape-divider.wave svg {
    height: 50px;
}
.shape-divider.split svg {
    height: 70px;
}
.shape-divider.top {
    top: 0;
}
.shape-divider.curve svg {
    height: 60px;
}
.shape-divider.bottom {
    bottom: 0;
}
.top {
    top: 0;
}
.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
}
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.shape-divider.angle svg {
    height: 40px;
}
.shape-divider-component {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #8B6337 0%, #4A3426 100%);
    color: white;
    text-align: center;
}

Sections - Social Proof Component

SECTIONS html> comp-578

A sections component. Contains 12 child elements.

HTML

<section class="social-proof-component">
 <div class="social-container">
  <div class="social-logos">
   <span class="social-logo">
    The Knot
   </span>
   <span class="social-logo">
    •
   </span>
   <span class="social-logo">
    WeddingWire
   </span>
   <span class="social-logo">
    •
   </span>
   <span class="social-logo">
    Martha Stewart
   </span>
   <span class="social-logo">
    •
   </span>
   <span class="social-logo">
    Brides
   </span>
  </div>
  <p class="social-text">
   Featured as one of
   <span class="highlight">
    Minnesota's Top 10
   </span>
   wedding venues 
            three years running, with over
   <span class="highlight">
    500 five-star reviews
   </span>
  </p>
 </div>
</section>

CSS

.social-proof-component::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255, 255, 255, 0.1)"/><circle cx="90" cy="30" r="1" fill="rgba(255, 255, 255, 0.1)"/><circle cx="50" cy="50" r="1" fill="rgba(255, 255, 255, 0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23stars)"/></svg>');
}
.social-proof-component .social-text {
        font-size: 24px;
    }
.highlight {
    font-style: italic;
    color: #D4A574;
}
.social-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    text-align: center;
}
.social-proof-component {
    padding: 80px 0;
    background: linear-gradient(135deg, #7A8B7F 0%, #4A3426 100%);
    position: relative;
    overflow: hidden;
}
.social-proof-component .social-logos {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    opacity: 0.7;
}
.social-text {
        font-size: 24px;
    }
.social-text .highlight {
    font-style: italic;
    color: #D4A574;
}
.social-proof-component .social-text .highlight {
    font-style: italic;
    color: #D4A574;
}
.social-proof-component .social-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    text-align: center;
}
.social-proof-component .social-logo {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    color: white;
}
.social-proof-component .social-text {
    font-size: 32px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.4;
    color: white;
}
.social-logo {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    color: white;
}
.social-text {
    font-size: 32px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.4;
    color: white;
}
.social-logos {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    opacity: 0.7;
}

Sections - Feature List

SECTIONS html> comp-579

A sections component. Contains 3 child elements.

Climate-controlled comfort year-round
Original exposed beam architecture
Capacity for up to 300 guests

...

HTML

<ul class="feature-list">
 <li>
  Climate-controlled comfort year-round
 </li>
 <li>
  Original exposed beam architecture
 </li>
 <li>
  Capacity for up to 300 guests
 </li>
</ul>

CSS

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}

Sections - Feature List

SECTIONS html> comp-580

A sections component. Contains 3 child elements.

Sunset ceremony perfection
Natural amphitheater setting
Rain backup in covered pavilion

...

HTML

<ul class="feature-list">
 <li>
  Sunset ceremony perfection
 </li>
 <li>
  Natural amphitheater setting
 </li>
 <li>
  Rain backup in covered pavilion
 </li>
</ul>

CSS

.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}

Sections - Featured Post

SECTIONS html> comp-586

A sections component containing images, links. Contains 10 child elements.

Featured Story

October 15, 2024 5 min read

A Magical Fall Wedding: Sarah & Tom

When autumn leaves created...

HTML

<article class="featured-post">
 <div class="blog-image">
  <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=800"/>
  <span class="blog-category">
   Featured Story
  </span>
 </div>
 <div class="blog-content">
  <div class="blog-meta">
   <span>
    October 15, 2024
   </span>
   <span>
    5 min read
   </span>
  </div>
  <h3 class="blog-title">
   A Magical Fall Wedding: Sarah & Tom
  </h3>
  <p class="blog-excerpt">
   When autumn leaves created natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic.
  </p>
  <a class="read-more" href="#">
   Read Story
  </a>
 </div>
</article>

CSS

.read-more:hover {
    color: var(--blog-primary);
}
.blog-image {
    height: 200px;
    filter: brightness(0.8);
    transition: filter 0.4s ease;
    overflow: hidden;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-excerpt {
    color: var(--blog-brown);
    line-height: 1.8;
    margin-bottom: 25px;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.read-more:hover::after {
    transform: translateX(5px);
}
.blog-image {
    filter: brightness(1);
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-content {
    padding: 30px;
}
.blog-excerpt {
    color: white;
}
.read-more {
    color: var(--blog-accent);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more {
    color: var(--blog-accent);
}
.featured-post .blog-content {
    padding: 40px;
}
.blog-image img {
    transform: scale(1.05);
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-content {
    padding: 40px;
}

Sections - Block Content

SECTIONS html> comp-589

A sections component containing buttons, links. Contains 8 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities.

Climate-controlled comfort year-round
Original exposed beam architecture
Capacity for up to 300 guests

Explore The Barn

...

HTML

<div class="block-content">
 <div class="number">
  01
 </div>
 <h3>
  The Historic Barn
 </h3>
 <p>
  Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities.
 </p>
 <ul class="feature-list">
  <li>
   Climate-controlled comfort year-round
  </li>
  <li>
   Original exposed beam architecture
  </li>
  <li>
   Capacity for up to 300 guests
  </li>
 </ul>
 <a class="btn-outline" href="#">
  Explore The Barn
 </a>
</div>

CSS

.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.block-content {
    padding: 40px;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.block-content {
    direction: ltr;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.number {
    font-size: 80px;
    color: var(--alt-accent);
    opacity: 0.5;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}

Sections - Block Content

SECTIONS html> comp-590

A sections component containing buttons, links. Contains 8 child elements.

02

Vineyard Ceremonies

Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites.

Sunset ceremony perfection
Natural amphitheater setting
Rain backup in covered pavilion

View Ceremony Sites

...

HTML

<div class="block-content">
 <div class="number">
  02
 </div>
 <h3>
  Vineyard Ceremonies
 </h3>
 <p>
  Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites.
 </p>
 <ul class="feature-list">
  <li>
   Sunset ceremony perfection
  </li>
  <li>
   Natural amphitheater setting
  </li>
  <li>
   Rain backup in covered pavilion
  </li>
 </ul>
 <a class="btn-outline" href="#">
  View Ceremony Sites
 </a>
</div>

CSS

.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.block-content {
    padding: 40px;
}
.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.block-content {
    direction: ltr;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.number {
    font-size: 80px;
    color: var(--alt-accent);
    opacity: 0.5;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}

Sections - Blog Content

SECTIONS html> comp-591

A sections component containing links. Contains 6 child elements.

October 15, 2024 5 min read

A Magical Fall Wedding: Sarah & Tom

When autumn leaves created natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic.

Read Story

...

HTML

<div class="blog-content">
 <div class="blog-meta">
  <span>
   October 15, 2024
  </span>
  <span>
   5 min read
  </span>
 </div>
 <h3 class="blog-title">
  A Magical Fall Wedding: Sarah & Tom
 </h3>
 <p class="blog-excerpt">
  When autumn leaves created natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic.
 </p>
 <a class="read-more" href="#">
  Read Story
 </a>
</div>

CSS

.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.read-more:hover {
    color: var(--blog-primary);
}
.read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more {
    color: var(--blog-accent);
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.read-more:hover::after {
    transform: translateX(5px);
}
.blog-content {
    padding: 30px;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-excerpt {
    color: white;
}
.read-more {
    color: var(--blog-accent);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}
.blog-excerpt {
    color: var(--blog-brown);
    line-height: 1.8;
    margin-bottom: 25px;
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-content {
    padding: 40px;
}

Sections - Content

SECTIONS html> comp-592

A sections component. Contains 4 child elements.

Planning Tips

10 Ways to Personalize Your Barn Wedding

October 10, 2024

...

HTML

<div class="content">
 <span class="blog-category">
  Planning Tips
 </span>
 <h3 class="blog-title">
  10 Ways to Personalize Your Barn Wedding
 </h3>
 <div class="blog-meta">
  <span>
   October 10, 2024
  </span>
 </div>
</div>

CSS

.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.content {
    flex: 1;
}

Sections - Content

SECTIONS html> comp-593

A sections component. Contains 4 child elements.

Seasonal Guide

Why Minnesota Summers Make Perfect Weddings

October 5, 2024

...

HTML

<div class="content">
 <span class="blog-category">
  Seasonal Guide
 </span>
 <h3 class="blog-title">
  Why Minnesota Summers Make Perfect Weddings
 </h3>
 <div class="blog-meta">
  <span>
   October 5, 2024
  </span>
 </div>
</div>

CSS

.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.content {
    flex: 1;
}

Sections - Block Item

SECTIONS html> comp-594

A sections component containing images, buttons, links. Contains 12 child elements.

01

The Historic Barn

Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities.

Climate-controlled comfort year-round
Original exposed beam architecture
Capacity for up to 300 guests

<div class="block-item">
 <div class="block-content">
  <div class="number">
   01
  </div>
  <h3>
   The Historic Barn
  </h3>
  <p>
   Step into a piece of Minnesota history. Our meticulously restored barn combines century-old craftsmanship with modern amenities.
  </p>
  <ul class="feature-list">
   <li>
    Climate-controlled comfort year-round
   </li>
   <li>
    Original exposed beam architecture
   </li>
   <li>
    Capacity for up to 300 guests
   </li>
  </ul>
  <a class="btn-outline" href="#">
   Explore The Barn
  </a>
 </div>
 <div class="block-image">
  <img alt="Historic barn" src="https://images.unsplash.com/photo-1510076857177-7470076d4098?w=800"/>
  <span class="image-badge">
   100+ Years
  </span>
 </div>
</div>

.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.block-item.reverse {
    direction: rtl;
}
.block-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.block-item.reverse .block-content {
    direction: ltr;
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.block-item:last-child {
    margin-bottom: 0;
}
.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.block-content {
    padding: 40px;
}
.block-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.image-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--alt-wine);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.block-item.reverse {
        direction: ltr;
    }
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.number {
    font-size: 80px;
    color: var(--alt-accent);
    opacity: 0.5;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}
.block-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.block-content {
    direction: ltr;
}
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.block-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }

Sections - Block Item Reverse

SECTIONS html> comp-596

A sections component containing images, buttons, links. Contains 12 child elements.

02

Vineyard Ceremonies

Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites.

Sunset ceremony perfection
Natural amphitheater setting
Rain backup in covered pavilion

View Ceremony Sit...

<div class="block-item reverse">
 <div class="block-content">
  <div class="number">
   02
  </div>
  <h3>
   Vineyard Ceremonies
  </h3>
  <p>
   Exchange vows surrounded by rolling hills and grape vines. Our vineyard offers multiple ceremony sites.
  </p>
  <ul class="feature-list">
   <li>
    Sunset ceremony perfection
   </li>
   <li>
    Natural amphitheater setting
   </li>
   <li>
    Rain backup in covered pavilion
   </li>
  </ul>
  <a class="btn-outline" href="#">
   View Ceremony Sites
  </a>
 </div>
 <div class="block-image">
  <img alt="Vineyard" src="https://images.unsplash.com/photo-1474112704314-8162b7749a90?w=800"/>
  <span class="image-badge">
   5 Locations
  </span>
 </div>
</div>

.btn-outline {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--alt-accent);
    color: var(--alt-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 14px;
    transition: all 0.3s ease;
}
.block-item.reverse {
    direction: rtl;
}
.block-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}
.btn-outline:hover {
    background: var(--hero-cream);
    color: var(--hero-brown);
}
.block-item.reverse .block-content {
    direction: ltr;
}
.btn-outline {
    background: transparent;
    color: var(--hero-cream);
    border: 2px solid var(--hero-cream);
    padding: 1rem 2.75rem;
}
.reverse {
        direction: ltr;
    }
.block-item:last-child {
    margin-bottom: 0;
}
.feature-list {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
}
.block-content {
    padding: 40px;
}
.reverse {
    direction: rtl;
}
.block-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.image-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--alt-wine);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.block-item.reverse {
        direction: ltr;
    }
.feature-list li {
    padding: 12px 0;
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, 0.8);
}
.number {
    font-size: 80px;
    color: var(--alt-accent);
    opacity: 0.5;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}
.block-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.btn-outline:hover {
    background: var(--alt-accent);
    color: white;
}
.block-content {
    direction: ltr;
}
.reverse .block-content {
    direction: ltr;
}
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--alt-accent);
    font-weight: bold;
    font-size: 18px;
}
.block-item {
        grid-template-columns: 1fr;
        gap: 40px;
    }

Maps - Map Container

MAPS html> comp-609

A maps component. Contains 31 child elements.

Find Your Way to Forever

Address

12500 Rum River Drive
Princeton, MN 55371

<div class="map-container">
 <div class="map-info">
  <h2>
   Find Your Way to Forever
  </h2>
  <div class="location-details">
   <div class="location-item">
    <div class="location-icon">
     📍
    </div>
    <div class="location-text">
     <h4>
      Address
     </h4>
     <p>
      12500 Rum River Drive
      <br/>
      Princeton, MN 55371
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     🚗
    </div>
    <div class="location-text">
     <h4>
      Easy Access From
     </h4>
     <p>
      45 min from Minneapolis
      <br/>
      30 min from St. Cloud
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     ✈️
    </div>
    <div class="location-text">
     <h4>
      Nearest Airport
     </h4>
     <p>
      Minneapolis-St. Paul International
      <br/>
      55 miles (1 hour drive)
     </p>
    </div>
   </div>
   <div class="location-item">
    <div class="location-icon">
     🏨
    </div>
    <div class="location-text">
     <h4>
      Accommodations
     </h4>
     <p>
      Partner hotels in Princeton & Milaca
      <br/>
      Group rates available
     </p>
    </div>
   </div>
  </div>
 </div>
 <div class="map-embed">
  <div class="map-placeholder">
   <p>
    Interactive Map
   </p>
   <p style="font-size: 16px; margin-top: 10px;">
    Click to view on Google Maps
   </p>
  </div>
 </div>
</div>

.location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}
.map-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.map-embed {
    background: var(--map-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    position: relative;
    overflow: hidden;
}
.map-info {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}
.map-embed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(122, 139, 127, 0.9) 0%, rgba(74, 52, 38, 0.9) 100%);
}
.map-info h2 {
    font-size: 42px;
    color: var(--map-dark);
    margin-bottom: 30px;
}
.map-info {
        padding: 40px 20px;
    }
.location-item {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    color: var(--map-dark);
}
.map-placeholder {
    position: relative;
    z-index: 1;
    text-align: center;
}
.location-details {
    margin-bottom: 40px;
}
.map-container {
        grid-template-columns: 1fr;
    }
.location-icon {
    width: 40px;
    height: 40px;
    background: var(--map-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}

Maps - Map Info

MAPS html> comp-610

A maps component. Contains 26 child elements.

Find Your Way to Forever

Address

12500 Rum River Drive
Princeton, MN 55371

Easy Access From

45 m...

<div class="map-info">
 <h2>
  Find Your Way to Forever
 </h2>
 <div class="location-details">
  <div class="location-item">
   <div class="location-icon">
    📍
   </div>
   <div class="location-text">
    <h4>
     Address
    </h4>
    <p>
     12500 Rum River Drive
     <br/>
     Princeton, MN 55371
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    🚗
   </div>
   <div class="location-text">
    <h4>
     Easy Access From
    </h4>
    <p>
     45 min from Minneapolis
     <br/>
     30 min from St. Cloud
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    ✈️
   </div>
   <div class="location-text">
    <h4>
     Nearest Airport
    </h4>
    <p>
     Minneapolis-St. Paul International
     <br/>
     55 miles (1 hour drive)
    </p>
   </div>
  </div>
  <div class="location-item">
   <div class="location-icon">
    🏨
   </div>
   <div class="location-text">
    <h4>
     Accommodations
    </h4>
    <p>
     Partner hotels in Princeton & Milaca
     <br/>
     Group rates available
    </p>
   </div>
  </div>
 </div>
</div>

.location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}
.map-info {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}
.map-info h2 {
    font-size: 42px;
    color: var(--map-dark);
    margin-bottom: 30px;
}
.map-info {
        padding: 40px 20px;
    }
.location-item {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    color: var(--map-dark);
}
.location-details {
    margin-bottom: 40px;
}
.location-icon {
    width: 40px;
    height: 40px;
    background: var(--map-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}

Maps - Location Details

MAPS html> comp-613

A maps component. Contains 24 child elements.

Address

12500 Rum River Drive
Princeton, MN 55371

Easy Access From

45 min from Minneapolis
30 min from St. Cloud

<div class="location-details">
 <div class="location-item">
  <div class="location-icon">
   📍
  </div>
  <div class="location-text">
   <h4>
    Address
   </h4>
   <p>
    12500 Rum River Drive
    <br/>
    Princeton, MN 55371
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   🚗
  </div>
  <div class="location-text">
   <h4>
    Easy Access From
   </h4>
   <p>
    45 min from Minneapolis
    <br/>
    30 min from St. Cloud
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   ✈️
  </div>
  <div class="location-text">
   <h4>
    Nearest Airport
   </h4>
   <p>
    Minneapolis-St. Paul International
    <br/>
    55 miles (1 hour drive)
   </p>
  </div>
 </div>
 <div class="location-item">
  <div class="location-icon">
   🏨
  </div>
  <div class="location-text">
   <h4>
    Accommodations
   </h4>
   <p>
    Partner hotels in Princeton & Milaca
    <br/>
    Group rates available
   </p>
  </div>
 </div>
</div>

.location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}
.location-item {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    color: var(--map-dark);
}
.location-details {
    margin-bottom: 40px;
}
.location-icon {
    width: 40px;
    height: 40px;
    background: var(--map-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}

Maps - Location Item

MAPS html> comp-616

A maps component. Contains 5 child elements.

Easy Access From

45 min from Minneapolis
30 min from St. Cloud

<div class="location-item">
 <div class="location-icon">
  🚗
 </div>
 <div class="location-text">
  <h4>
   Easy Access From
  </h4>
  <p>
   45 min from Minneapolis
   <br/>
   30 min from St. Cloud
  </p>
 </div>
</div>

.location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}
.location-item {
    display: flex;
    align-items: start;
    margin-bottom: 25px;
    color: var(--map-dark);
}
.location-icon {
    width: 40px;
    height: 40px;
    background: var(--map-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
}

Maps - Location Text

MAPS html> comp-617

A maps component. Contains 3 child elements.

Easy Access From

45 min from Minneapolis
30 min from St. Cloud

<div class="location-text">
 <h4>
  Easy Access From
 </h4>
 <p>
  45 min from Minneapolis
  <br/>
  30 min from St. Cloud
 </p>
</div>

.location-text h4 {
    color: var(--map-dark);
    margin-bottom: 5px;
    font-size: 18px;
}
.location-text p {
    color: var(--map-light);
    line-height: 1.6;
    margin: 0;
}

Social Container

SOCIAL html> comp-623

A social component. Contains 11 child elements.

<div class="social-container">
 <div class="social-logos">
  <span class="social-logo">
   The Knot
  </span>
  <span class="social-logo">
   •
  </span>
  <span class="social-logo">
   WeddingWire
  </span>
  <span class="social-logo">
   •
  </span>
  <span class="social-logo">
   Martha Stewart
  </span>
  <span class="social-logo">
   •
  </span>
  <span class="social-logo">
   Brides
  </span>
 </div>
 <p class="social-text">
  Featured as one of
  <span class="highlight">
   Minnesota's Top 10
  </span>
  wedding venues 
            three years running, with over
  <span class="highlight">
   500 five-star reviews
  </span>
 </p>
</div>

.highlight {
    font-style: italic;
    color: #D4A574;
}
.social-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    text-align: center;
}
.social-text {
        font-size: 24px;
    }
.social-text .highlight {
    font-style: italic;
    color: #D4A574;
}
.social-logo {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    color: white;
}
.social-text {
    font-size: 32px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.4;
    color: white;
}
.social-logos {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    opacity: 0.7;
}

Social Logos

SOCIAL html> comp-624

A social component. Contains 7 child elements.

<div class="social-logos">
 <span class="social-logo">
  The Knot
 </span>
 <span class="social-logo">
  •
 </span>
 <span class="social-logo">
  WeddingWire
 </span>
 <span class="social-logo">
  •
 </span>
 <span class="social-logo">
  Martha Stewart
 </span>
 <span class="social-logo">
  •
 </span>
 <span class="social-logo">
  Brides
 </span>
</div>

.social-logo {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    color: white;
}
.social-logos {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    opacity: 0.7;
}

Social Text

SOCIAL html> comp-625

A social component. Contains 2 child elements.

<p class="social-text">
 Featured as one of
 <span class="highlight">
  Minnesota's Top 10
 </span>
 wedding venues 
            three years running, with over
 <span class="highlight">
  500 five-star reviews
 </span>
</p>

.social-text .highlight {
    font-style: italic;
    color: #D4A574;
}
.highlight {
    font-style: italic;
    color: #D4A574;
}
.social-text {
        font-size: 24px;
    }
.social-text {
    font-size: 32px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.4;
    color: white;
}

Blogs - Blog Container

BLOGS html> comp-628

A blogs component containing images, links. Contains 33 child elements.

Stories from the Barn

Wedding inspiration and real celebrations

Featured Story

<div class="blog-container">
 <div class="blog-header">
  <div>
   <h2>
    Stories from the Barn
   </h2>
   <p class="subtitle">
    Wedding inspiration and real celebrations
   </p>
  </div>
 </div>
 <div class="blog-grid">
  <article class="featured-post">
   <div class="blog-image">
    <img alt="Fall wedding" src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=800"/>
    <span class="blog-category">
     Featured Story
    </span>
   </div>
   <div class="blog-content">
    <div class="blog-meta">
     <span>
      October 15, 2024
     </span>
     <span>
      5 min read
     </span>
    </div>
    <h3 class="blog-title">
     A Magical Fall Wedding: Sarah & Tom
    </h3>
    <p class="blog-excerpt">
     When autumn leaves created natural confetti for their first kiss as newlyweds, we knew this celebration was pure magic.
    </p>
    <a class="read-more" href="#">
     Read Story
    </a>
   </div>
  </article>
  <div class="side-posts">
   <article class="side-post">
    <div class="thumb">
     <img alt="Planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=300"/>
    </div>
    <div class="content">
     <span class="blog-category">
      Planning Tips
     </span>
     <h3 class="blog-title">
      10 Ways to Personalize Your Barn Wedding
     </h3>
     <div class="blog-meta">
      <span>
       October 10, 2024
      </span>
     </div>
    </div>
   </article>
   <article class="side-post">
    <div class="thumb">
     <img alt="Summer" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=300"/>
    </div>
    <div class="content">
     <span class="blog-category">
      Seasonal Guide
     </span>
     <h3 class="blog-title">
      Why Minnesota Summers Make Perfect Weddings
     </h3>
     <div class="blog-meta">
      <span>
       October 5, 2024
      </span>
     </div>
    </div>
   </article>
  </div>
 </div>
</div>

.blog-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}
.read-more:hover {
    color: var(--blog-primary);
}
.blog-image {
    height: 200px;
    filter: brightness(0.8);
    transition: filter 0.4s ease;
    overflow: hidden;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.subtitle {
    color: var(--blog-brown);
    font-size: 18px;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.blog-excerpt {
    color: var(--blog-brown);
    line-height: 1.8;
    margin-bottom: 25px;
}
.featured-post:hover .blog-image img {
    transform: scale(1.05);
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.read-more:hover::after {
    transform: translateX(5px);
}
.blog-grid,
    .blog-dark .blog-grid {
        grid-template-columns: 1fr;
    }
.blog-image {
    filter: brightness(1);
}
.blog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.side-post .content {
    flex: 1;
}
.side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.subtitle {
    font-size: 20px;
    color: var(--services-light);
    max-width: 600px;
    margin: 0 auto;
}
.featured-post .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.blog-content {
    padding: 30px;
}
.blog-excerpt {
    color: white;
}
.read-more {
    color: var(--blog-accent);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
}
.side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.subtitle {
    font-size: 18px;
    color: var(--gallery-light);
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
}
.featured-post .blog-image {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}
.read-more {
    color: var(--blog-accent);
}
.side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.featured-post .blog-content {
    padding: 40px;
}
.blog-image img {
    transform: scale(1.05);
}
.featured-post {
    grid-row: span 2;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}
.subtitle {
    color: white;
}
.content {
    flex: 1;
}
.blog-content {
    padding: 40px;
}

Blogs - Side Posts

BLOGS html> comp-634

A blogs component containing images. Contains 16 child elements.

Planning Tips

10 Ways to Personalize Your Barn Wedding

October 10, 2024

<div class="side-posts">
 <article class="side-post">
  <div class="thumb">
   <img alt="Planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=300"/>
  </div>
  <div class="content">
   <span class="blog-category">
    Planning Tips
   </span>
   <h3 class="blog-title">
    10 Ways to Personalize Your Barn Wedding
   </h3>
   <div class="blog-meta">
    <span>
     October 10, 2024
    </span>
   </div>
  </div>
 </article>
 <article class="side-post">
  <div class="thumb">
   <img alt="Summer" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=300"/>
  </div>
  <div class="content">
   <span class="blog-category">
    Seasonal Guide
   </span>
   <h3 class="blog-title">
    Why Minnesota Summers Make Perfect Weddings
   </h3>
   <div class="blog-meta">
    <span>
     October 5, 2024
    </span>
   </div>
  </div>
 </article>
</div>

.side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.side-post .content {
    flex: 1;
}
.side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.content {
    flex: 1;
}
.side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Blogs - Side Post

BLOGS html> comp-635

A blogs component containing images. Contains 7 child elements.

Planning Tips

10 Ways to Personalize Your Barn Wedding

October 10, 2024

<article class="side-post">
 <div class="thumb">
  <img alt="Planning" src="https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=300"/>
 </div>
 <div class="content">
  <span class="blog-category">
   Planning Tips
  </span>
  <h3 class="blog-title">
   10 Ways to Personalize Your Barn Wedding
  </h3>
  <div class="blog-meta">
   <span>
    October 10, 2024
   </span>
  </div>
 </div>
</article>

.side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.side-post .content {
    flex: 1;
}
.side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.content {
    flex: 1;
}
.side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Blogs - Side Post

BLOGS html> comp-636

A blogs component containing images. Contains 7 child elements.

Seasonal Guide

Why Minnesota Summers Make Perfect Weddings

October 5, 2024

<article class="side-post">
 <div class="thumb">
  <img alt="Summer" src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=300"/>
 </div>
 <div class="content">
  <span class="blog-category">
   Seasonal Guide
  </span>
  <h3 class="blog-title">
   Why Minnesota Summers Make Perfect Weddings
  </h3>
  <div class="blog-meta">
   <span>
    October 5, 2024
   </span>
  </div>
 </div>
</article>

.side-post {
    display: flex;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.blog-meta {
    color: rgba(255, 255, 255, 0.5);
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.side-posts {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.side-post:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--blog-brown);
    opacity: 0.8;
}
.side-post .thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--blog-accent);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-title,
.blog-dark .dark-card .blog-excerpt {
    color: white;
}
.blog-title {
    font-size: 32px;
    color: var(--blog-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}
.side-post .content {
    flex: 1;
}
.side-post .blog-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.content {
    flex: 1;
}
.side-post .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Headers - Header Content

HEADERS html> comp-637

A headers component containing links. Contains 21 child elements.

RUM RIVER BARN

Headers - Section Header

HEADERS html> comp-638

A headers component. Contains 3 child elements.

Est. 2005

WELCOME TO RUM RIVER

Where rustic charm meets modern elegance in the heart of Minnesota

<div class="section-header">
 <p class="script-font">
  Est. 2005
 </p>
 <h2>
  WELCOME TO RUM RIVER
 </h2>
 <p class="subtitle">
  Where rustic charm meets modern elegance in the heart of Minnesota
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-639

A headers component. Contains 3 child elements.

Our Story

THE RUM RIVER LEGACY

Four generations of hospitality, one unforgettable venue

<div class="section-header">
 <p class="script-font">
  Our Story
 </p>
 <h2>
  THE RUM RIVER LEGACY
 </h2>
 <p class="subtitle">
  Four generations of hospitality, one unforgettable venue
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-640

A headers component. Contains 3 child elements.

What We Offer

CELEBRATE LIFE'S MOMENTS

From intimate gatherings to grand celebrations

<div class="section-header">
 <p class="script-font">
  What We Offer
 </p>
 <h2>
  CELEBRATE LIFE'S MOMENTS
 </h2>
 <p class="subtitle">
  From intimate gatherings to grand celebrations
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-641

A headers component. Contains 3 child elements.

Explore Our Venue

STUNNING SPACES

Every corner tells a story, every space creates memories

<div class="section-header">
 <p class="script-font">
  Explore Our Venue
 </p>
 <h2>
  STUNNING SPACES
 </h2>
 <p class="subtitle">
  Every corner tells a story, every space creates memories
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-642

A headers component. Contains 3 child elements.

Investment in Memories

WEDDING PACKAGES

Thoughtfully crafted to bring your vision to life

<div class="section-header">
 <p class="script-font">
  Investment in Memories
 </p>
 <h2>
  WEDDING PACKAGES
 </h2>
 <p class="subtitle">
  Thoughtfully crafted to bring your vision to life
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-643

A headers component. Contains 3 child elements.

Meet Your Hosts

THE RUM RIVER FAMILY

Dedicated to making your celebration extraordinary

<div class="section-header">
 <p class="script-font">
  Meet Your Hosts
 </p>
 <h2>
  THE RUM RIVER FAMILY
 </h2>
 <p class="subtitle">
  Dedicated to making your celebration extraordinary
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-644

A headers component. Contains 3 child elements.

Real Love Stories

WEDDINGS AT THE BARN

Every celebration tells a unique story of love, laughter, and happily ever after

<div class="section-header">
 <p class="script-font">
  Real Love Stories
 </p>
 <h2>
  WEDDINGS AT THE BARN
 </h2>
 <p class="subtitle">
  Every celebration tells a unique story of love, laughter, and happily ever after
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-645

A headers component. Contains 3 child elements.

Follow Our Journey

@RUMRIVERBARN

Daily inspiration from real celebrations

<div class="section-header">
 <p class="script-font">
  Follow Our Journey
 </p>
 <h2>
  @RUMRIVERBARN
 </h2>
 <p class="subtitle">
  Daily inspiration from real celebrations
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Section Header

HEADERS html> comp-646

A headers component. Contains 3 child elements.

Start Your Journey

SCHEDULE YOUR VISIT

Let's create something beautiful together

<div class="section-header">
 <p class="script-font">
  Start Your Journey
 </p>
 <h2>
  SCHEDULE YOUR VISIT
 </h2>
 <p class="subtitle">
  Let's create something beautiful together
 </p>
</div>

.script-font {
            font-family: 'Brush Script MT', cursive;
            font-weight: 300;
            font-style: italic;
        }
.section-header .subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header {
            text-align: center;
            margin-bottom: 80px;
        }
.subtitle {
            font-size: 18px;
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }
.section-header .script-font {
            font-size: 32px;
            color: var(--accent-gold);
            margin-bottom: 15px;
        }
.section-header h2 {
                font-size: 36px;
            }
.section-header h2 {
            font-size: 56px;
            color: var(--deep-brown);
            margin-bottom: 20px;
            letter-spacing: 0.08em;
            font-weight: 300;
            text-transform: uppercase;
        }

Headers - Header

HEADERS html> comp-647

A headers component containing links. Contains 23 child elements.